Эффекты для аватара

Эффекты для аватара

Поворот аватара при наведении на 10°

В EXTRA.css добавляем:
Код:
.avatar img, .avatar .img, .avatarCropper {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.avatar img:hover, .avatar .img:hover, .avatarCropper:hover {
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    transform: rotate(-10deg);
}



Поворот аватара при наведении на 360°

В EXTRA.css добавляем:
Код:
.avatar img, .avatar .img, .avatarCropper {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.avatar img:hover, .avatar .img:hover, .avatarCropper:hover {
  border-radius: 50%;
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  transform: rotate(360deg);  
}



Я как бы не писал, но это вроде само сабой разумеющееся, НО?! Эти все фишки устанавливаются только по одной :-)
Назад
Сверху Снизу