Поворот минус CSS3

Question

Поворот минус CSS3

0

Как правильно повернуть знак "-"? Например, когда я устанавливаю знак + на поворот, все в порядке, они остаются на месте и просто вращаются. Существует пример

Но если я меняю content: '+'; к content: '-'; Я получаю поворот минусом по оси, но не остался на месте. Есть пример.

Действительно ли устанавливать минус, вращать как плюс?

kxc 05 май 2014, в 13:02

Источник

1

- - не центрирован по вертикали, у нас нет надежного решения для центрирования, я попытался добавить padding-bottom:.2em чтобы сделать его центрированным (возможно, не совсем) jsfiddle.net/viphalongpro/t6S2F/8 Однако это не надежно и стабильно, разные браузеры могут отображать его по-разному. Вы должны визуализировать знак - (без использования символа - ).
King King 05 май 2014, в 10:32
0

Хорошо, я понял, большое спасибо.
kxc 05 май 2014, в 11:00

Теги:

html

css

css3

animation

rotation

3 ответа

Ещё вопросы

- - не центрирован по вертикали, у нас нет надежного решения для центрирования, я попытался добавить padding-bottom:.2em чтобы сделать его центрированным (возможно, не совсем) jsfiddle.net/viphalongpro/t6S2F/8 Однако это не надежно и стабильно, разные браузеры могут отображать его по-разному. Вы должны визуализировать знак - (без использования символа - ).

Jukka K. Korpela · Answer 1 · 2014-05-05T08-31-00.000Z

Используйте МИНУС SIGN U + 2212 "-", который является, в частности, математическим оператором вместо обычного дефиса Ascii, официально известного как HYPHEN-MINUS U + 002D "-", который семантически неоднозначен и типично неполноценен (он должен работать, в некотором минимальном смысле, как знак пунктуации, как символ, как знак минуса, так и в нескольких других ролях, поэтому он не может хорошо выполнять какую-либо особую роль). В частности, MINUS SIGN (по любому условно разработанному шрифту) такой же ширины, что и PLUS SIGN, и отображается в том же вертикальном положении, что и горизонтальный ход PLUS SIGN. Одним словом, его дизайн совпадает с дизайном "+".

В CSS вы можете написать

 content: '\2212';

Кроме того, вы можете использовать MINUS SIGN:

 content: '−';

Но тогда вам нужно быть осторожным с кодировкой символов.

Отличный ответ. Я люблю ТАК, как я могу узнавать что-то новое каждый час

G-Cyr · Answer 2 · 2014-05-05T09-40-00.000Z

Если знак - стоит один, вы можете сделать: DEMO

line-height:0;/* reduce height to none; */
padding-bottom:0.2em;/* tune gap under font */

Если он находится среди другого контента, или добавьте его в vertical-align:middle;/* or what suits you best */

Я считаю, что inline-block кажется более точным.

jwestbrook · Answer 3 · 2014-05-05T08-54-00.000Z

Вы можете позиционировать свое: перед псевдоэлементами, используя абсолютные значения, а затем установить ширину и высоту. При этом преобразования по умолчанию будут применены к центру.

http://jsfiddle.net/sYm3T/

.box {
    width: 200px;
    height: 60px;
    background-color: gray;
    color: #ffffff;
    text-align: center;
    padding-top: 20px;
    position: relative;
    margin-bottom:10px;
}

.box:before {
    font-size: 50px;
    line-height:31px;
    position:absolute;
    content: '-';
    margin-left:-20px;
    margin-top:-20px;
    height:40px;
    width:40px;
    left:50%;
    top:50%;
    -moz-transition: 0.5s all;
    -webkit-transition: 0.5s all;
}

.box.plus:before {
    content: '+';
}
.box.minus:before {
    content: '-';
}

.box:hover::before
{
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
}

Другим решением было бы изучить свойство transform-origin, чтобы настроить, где происходит "центр" преобразования.