Кот

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Кот » Фишки и примочки » Поворот аватара при наведении.


Поворот аватара при наведении.

Сообщений 1 страница 4 из 4

1

В любое из окон стиля или в хтмл-верх в тегах <style> :

.post-author ul li.pa-avatar img{
  -webkit-transition: all 0.5s ease-out;
     -moz-transition: all 0.5s ease-out;
      -ms-transition: all 0.5s ease-out;
       -o-transition: all 0.5s ease-out;
          transition: all 0.5s ease-out;
}
.post-author ul li.pa-avatar img:hover {
  -webkit-transform: rotate(-2.5deg);  /* Saf3.1+, Chrome */
     -moz-transform: rotate(-2.5deg);  /* FF3.5+ */
      -ms-transform: rotate(-2.5deg);  /* IE9 */
       -o-transform: rotate(-2.5deg);  /* Opera 10.5 */
          transform: rotate(-2.5deg);
             filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */
                     M11=0.9990482215818578, M12=0.043619387365336, M21=-0.043619387365336, M22=0.9990482215818578, sizingMethod='auto expand');
               zoom: 1;

}

Красное - скорость поворота аватара.
Синее - на сколько градусов поворачивается аватар. Если убрать минус перед числом, то аватар будет поворачиваться в другую сторону. Сейчас он поворачивается против час. стрелки.

0

2

что нужно поменять для того, чтобы поворачивались картинки в объявлении?

Отредактировано slastnicova (2012-08-10 10:03:45)

0

3

slastnicova
1. Картинкам в объявлении присваваешь селектор, например, slastnicova. Т.о. они должны выглядеть так:

<img id="slastnicova" src="ссылка">

2. В коде стиля из первого поста заменить:

.post-author ul li.pa-avatar img{
  -webkit-transition: all 0.5s ease-out;
     -moz-transition: all 0.5s ease-out;
      -ms-transition: all 0.5s ease-out;
       -o-transition: all 0.5s ease-out;
          transition: all 0.5s ease-out;
}
.post-author ul li.pa-avatar img:hover {
  -webkit-transform: rotate(-2.5deg);  /* Saf3.1+, Chrome */
     -moz-transform: rotate(-2.5deg);  /* FF3.5+ */
      -ms-transform: rotate(-2.5deg);  /* IE9 */
       -o-transform: rotate(-2.5deg);  /* Opera 10.5 */
          transform: rotate(-2.5deg);
             filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */
                     M11=0.9990482215818578, M12=0.043619387365336, M21=-0.043619387365336, M22=0.9990482215818578, sizingMethod='auto expand');
               zoom: 1;

}

Красное на свой селектор.

+1

4

faiko
пасибо)

0


Вы здесь » Кот » Фишки и примочки » Поворот аватара при наведении.


Рейтинг форумов | Создать форум бесплатно