Div вращение не работает

Question

Я тестирование с помощью CSS и получил странное поведение, где преобразования: поворот не работает, вот пример, в котором анимация не бывает: jsFiddle

CSS

.close { 
    width:100px; 
    height:100px; 
    background:#00f; 
    color:#fff; 

    -webkit-transform: rotate(0deg); 
    -moz-transform: rotate(0deg); 
    -o-transform: rotate(0deg); 
    -ms-transform: rotate(0deg); 
    transform: rotate(0deg); 
} 
.close:hover { 
    -webkit-transform: rotate(-180deg); 
    -moz-transform: rotate(-180deg); 
    -o-transform: rotate(-180deg); 
    -ms-transform: rotate(-180deg); 
    transform: rotate(-180deg); 
} 
.close, .close:hover { 
    -webkit-transition:rotate .2s ease-in-out; 
    -moz-transition:rotate .2s ease-in-out; 
    -o-transition:rotate .2s ease-in-out; 
    -ms-transition:rotate .2s ease-in-out; 
    transition:rotate .2s ease-in-out; 
} 

Почему это не работает?

Спасибо;)

Answer 1

Вы применили переход к неправильному атрибута: (Working jsFiddle)

.close { /* You don't really need .close:hover here */ 
    -webkit-transition: -webkit-transform .2s ease-in-out; 
     -moz-transition: -moz-transform .2s ease-in-out; 
     -o-transition:  -o-transform .2s ease-in-out; 
     -ms-transition:  -ms-transform .2s ease-in-out; 
      transition:   transform .2s ease-in-out; 
} 

Атрибут вы хотите анимировать является transform. rotate() - это функция преобразования, а не свойство CSS.