Вращать псевдоэлемент вокруг его центра?

Я создал простое дерево меню. Элементы, которые переключают JQuery для отображения своих детей и переключения класса «открыто».Вращать псевдоэлемент вокруг его центра?

У меня есть «: перед тем» знаком плюс по этому вопросу, и при открытии она поворачивается 135 градусов к й, см анимированного GIF:

enter image description here

Как вы можете видеть, она вращается «вверх ». Я хочу, чтобы он вращался вокруг своего центра (что, по моему мнению, было по умолчанию). Вот мой код:

.nav-header { 
    color: gray; 
    font-weight: bold; 
    font-size: 16px; 
    padding-top: 10px; 
    cursor: pointer; 
    &:before { 
     content: '+'; 
     font-size: 23px; 
     display: inline-block; 
     -webkit-transition: all .3s; 
     -moz-transition: all .3s; 
     -ms-transition: all .3s; 
     -o-transition: all .3s; 
     transition: all .3s; 
    } 
    &.open { 
     &:before { 
      -webkit-transform-origin: center center; 
      -moz-transform-origin: center center; 
      -ms-transform-origin: center center; 
      -o-transform-origin: center center; 
      transform-origin: center center; 
      -webkit-transform: rotate(135deg); 
      -moz-transform: rotate(135deg); 
      -ms-transform: rotate(135deg); 
      -o-transform: rotate(135deg); 
      transform: rotate(135deg); 
     }

источник

2014-02-19 Steve

Вы пробовали 'transform-origin: center center;'? – apohl

Просто дикое предположение, но как насчет использования 'middle middle' здесь:' transform-origin: middle right; ' – krowe

yes, проверенный центр центра, 50% 50% и т. Д. – Steve

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

Попробуйте transform-origin: center center;

EDIT: необходимость конкретного производителя префиксы:

-moz-transform-origin: center center; 
-webkit-transform-origin: center center; 
-o-transform-origin: center center; 
-ms-transform-origin: center center; 
transform-origin: center center;

EDIT 2:

проверить эту скрипку, чтобы увидеть он работает в действии: http://jsfiddle.net/B226E/18/

источник

2014-02-19 19:26:07 jtheis

Пробовал это первым, получает результат выше. – Steve

Проверьте ссылку, которую я вам отправил. Похоже, что для разных браузеров необходимы некоторые префиксы для конкретного поставщика. Также обновил свой ответ. – jtheis

Кроме того, я не думаю, что это имеет значение в вашем случае, так как X настолько мал, но макет остальной части страницы определяется до того, как элемент повернут, поэтому, если он был большим и/или нечетным образом, он мог бы перекрывают другие элементы. – jtheis

Вы можете использовать

#element:hover { 
    -webkit-transform: rotate(360deg); 
    -moz-transform: rotate(360deg); 
    -o-transform: rotate(360deg); 
    -ms-transform: rotate(360deg); 
    }

источник

2014-02-19 19:35:58

Я пытался превратить + в x – Steve

ОК, это сейчас:

enter image description here

Я использую самозагрузки glyphicon, добавил немного отступов на своем праве и переместил центр 10% :

.nav-header { 
    color: gray; 
    font-weight: bold; 
    font-size: 16px; 
    padding-top: 10px; 
    cursor: pointer; 
    display: inline-block; 
    &:before { 
     content: '\2b'; 
     font-family: 'Glyphicons Halflings'; 
     padding-right: 3px; 
     font-weight: normal; 
     display: inline-block; 
     color: @brand-primary; 
     -webkit-transition: all .3s; 
     -moz-transition: all .3s; 
     -ms-transition: all .3s; 
     -o-transition: all .3s; 
     transition: all .3s; 
     -webkit-transform-origin: 40% center; 
     -moz-transform-origin: 40% center; 
     -ms-transform-origin: 40% center; 
     -o-transform-origin: 40% center; 
     transform-origin: 40% center; 
    } 
    &.open { 
     &:before { 
      -webkit-transform: rotate(135deg); 
      -moz-transform: rotate(135deg); 
      -ms-transform: rotate(135deg); 
      -o-transform: rotate(135deg); 
      transform: rotate(135deg); 
     } 
    } 

}

источник

2014-02-19 19:58:07 Steve

Это лучший способ с четким gif и отсутствием голосов. Исправлена) –

Вращать псевдоэлемент вокруг его центра?

ответ

Смежные вопросы