[Codes] Hiệu ứng avatar nghiêng, xoay

Demo:
Vào topic này và rê chuột vào avatar:
[You must be registered and logged in to see this link.]
ban đầu avatar nó nghiêng,
rê chuột vô là nó xoay vòng vòng rùi nằm vị trí ngay ngắn
sau đó trở về trạng thái nghiêng như ban đầu.

hướng dẫn:
1. thêm vào CSS:

Code:

.avatar97 img{
opacity: 0.3;filter: alpha(opacity=30);
border-radius:5px;
background-color: #FFFFFF;
margin:1px 3px 3px 1px;
padding:3px;
border:1px solid #d4d4d4;
box-shadow: 3px 3px 3px #8A8A8A;
transform:rotate(30deg); -moz-transform:rotate(30deg); -webkit-transform:rotate(30deg);
transition: all 2s ease; -webkit-transition: all 2s ease; -moz-transition: all 2s ease;
}
.avatar97 img: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;
}

2. Tìm trong viewtopic_body:

Code:

{postrow.displayed.POSTER_AVATAR}

Thay bằng:

Code:

<span class="avatar97">{postrow.displayed.POSTER_AVATAR}</span>

có thể chỉnh kích thước avatar
- cứ muốn avatar kiểu chi thì cho avatar kiểu nớ. hehe
thay trong css lẫn viewtopic_body
như thay chữ avatar97 bằng avatarX
X là tham số chi chi cũng được

- có thể giới hạn kích thước avatar nữa
tránh tình trạng ảnh avatar to quá
thêm max-width và max-height
ví dụ, trong codes CSS trên cho max-width:110px

css:

Code:

.avatar97 img{
 max-width:110px;
opacity: 0.3;filter: alpha(opacity=30);
border-radius:5px;
background-color: #FFFFFF;
margin:1px 3px 3px 1px;
padding:3px;
border:1px solid #d4d4d4;
box-shadow: 3px 3px 3px #8A8A8A;
transform:rotate(30deg); -moz-transform:rotate(30deg); -webkit-transform:rotate(30deg);
transition: all 2s ease; -webkit-transition: all 2s ease; -moz-transition: all 2s ease;
}
.avatar97 img: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;
}