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

Я писал в топике Круглый аватар, как его сделать, сейчас решил продолжить с эффектами.

Закругляем аватар при наведении курсора мыши.

Первое делать не надо, потому, что в обычном состоянии аватар должен быть квадратный.
Открываем EXTRA.css и добавляем:

Код:

.avatar img:hover, .avatar .img:hover, .avatarCropper:hover {
  border-radius: 50%;
}

Постепенное закругление аватара при наведении.

В примере выше, аватар закругляется резко, добавим свойство transition, для плавности. В EXTRA.css добавим:

Код:

.avatar img, .avatar .img, .avatarCropper {
  -webkit-transition: border-radius 1s ease;
  -moz-transition: border-radius 1s ease;
  -o-transition: border-radius 1s ease;
  -ms-transition:border-radius 1s ease;
  transition: border-radius 1s ease;
}

Код из первого примера не убираем.



Поворот аватара при наведении на 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);
}

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

 

Супер Побольшебы таких приколюх.

 

Идея отличная, жги еще ))