Posbit Avatar Hover (Turns 360+ Effect)

[Osetin]

Суть: при наведении курсора на автор, автор крутится/переворачивается на 300° или другой вариант - аватор с эффектом зума.

vB Version: 4.2.0
Mod Version:1.00,
Coder/Designer: ChiNa-Man

1. Идем в Стили и Шаблоны/Выбираем редактируемый стиль/Ищем шаблон additional.css/добавляем ниже:


.myavatar:hover {
transition: all 3s ease;
-webkit-transition: all 3s ease;
-moz-transition: all 3s ease; transform:rotate(360deg);
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg); position:relative;
}

2. Идем в Стили и Шаблоны/Выбираем редактируемый стиль/Ищем шаблон postbit_legacy/ в нем ищем:


<img src="{vb:raw post.avatarurl}" alt="{vb:rawphrase xs_avatar, {vb:raw post.username}}" title="{vb:rawphrase xs_avatar, {vb:raw post.username}}" />
И заменяем на:


<div class="myavatar"><img src="{vb:raw post.avatarurl}" alt="{vb:rawphrase xs_avatar, {vb:raw post.username}}" title="{vb:rawphrase xs_avatar, {vb:raw post.username}}" /></div>
------
Если желаем установить эффект увеличения автора, возвращаемся в additional.css/заменяем недавно добавленный код на:


.myavatar:hover {
opacity: 1; filter: alpha(opacity=100);
transition: all 2s ease;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
transform:rotate(0deg);
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
transform: scale(1.5);
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
position:relative;
}