Вращение элемента, определенного в псевдоническом классе css

-2

У меня есть элемент, который используется после некоторого псевдо класса, он работает нормально, пока я не хочу, чтобы он перевернулся вверх дном и добавил эффект транса, он терпит неудачу. Конечным результатом является полное преобразование li.Вращение элемента, определенного в псевдоническом классе css

.dropdown-menu li a:first-child:nth-last-child(2):after { 
     content: ''; 
     background-color: #fff; 
     background:url('../img/open.png') no-repeat; 
     width: 18px; 
     height: 10px; 
     display:inline-block; 
     margin:-15px 0 0 35px; 
     float: right; 

} 
.dropdown-menu li a:hover{ 
     -ms-transform: rotate(180deg); /* IE 9 */ 
     -webkit-transform: rotate(180deg); /* Safari */ 
     transform: rotate(180deg); 
     }

Также стоит сделать это в css или jquery, так как поддержка css3 может быть ограничена?

источник

2015-09-02 Nofel

Вы имеете в виду, элемент ': after' также вращается, но вы этого не хотите? Если да, вам нужно применить обратное вращение на ': after' при наведении курсора. В противном случае он преобразуется, потому что элементы ': after' являются дочерними элементами элемента, к которому он присоединен. – Harry

@Harry Я просто хочу: после того, как элемент вращается, а не весь элемент li. – Nofel

Если это так, вы можете прямо применить 'transform' к элементу': after'. Если он все еще не работает, создайте демо и добавьте его в вопрос. – Harry

Я исправил его с небольшой помощью @harry, и он работает. Я искал неправильного ребенка. правильный код:

.dropdown-menu li a:first-child:nth-last-child(2):after { 
     content: ''; 
     background-color: #fff; 
     background:url('../img/open.png') no-repeat; 
     width: 18px; 
     height: 10px; 
     display:inline-block; 
     margin:-15px 0 0 35px; 
     float: right; 

} 
.dropdown-menu li a:hover:after{ 
    -ms-transform: rotate(18deg); /* IE 9 */ 
    -webkit-transform: rotate(180deg); /* Safari */ 
    transform: rotate(180deg); 
    -webkit-transition-timing-function: linear; /* Safari and Chrome */ 
    transition-timing-function: linear; 
     }

источник

2015-09-02 10:14:09 Nofel

Вращение элемента, определенного в псевдоническом классе css

ответ

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