Share đóng khung Avatar và Avatar xoay theo trục cực đẹp by DaiThinh

[bavuongduongpho]

Demo: http://sonmyschool.com/forum/showthread.php?1321-Anh-cong-Truong-THPT-Son-My-chup-270
http://sonmyschool.com/forum/images/dongkhungavatar.gif


Hướng dẫn:


Upload thư mục đính kèm ngang hàng với index.php (đính kèm)

Thêm Css:


/* ---------------- dong khung avatar www.sonmyschool.com --------------*/
.avatardaithinh_ { float: left; margin-right: 10px;background: url(images/avatardaithinh.png) no-repeat center top; width: 172px;}
.avatardaithinh_ .images { margin-top: 24px; margin-left: 0px;}
.avatardaithinh_ .images img{ width: 140px; height: 140px;}
.avatardaithinh_ h2 { font-size: 10pt; text-align: center; margin-top: 15px;}
.avatardaithinh_ p { text-align: center;}
/* ---------------- dong khung avatar www.sonmyschool.com --------------*/
/* ---------------- xoay avatar www.sonmyschool.com --------------*/
#sonmy_container {
position: relative;
margin: 10px auto;
width: 172px;
height: 172px;
z-index: 1;
}
.face.back {
display: none;
}

#sonmy_container {
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-o-perspective: 1000px;
-ms-perspective: 1000px;
perspective: 1000px;
}
#sonmy_card {
width: 100%;
height: 100%;
-webkit-transform-style: preserve-3d;
-webkit-transition: all 1.0s linear;
-moz-transform-style: preserve-3d;
-moz-transition: all 1.0s linear;
-o-transform-style: preserve-3d;
-o-transition: all 1.0s linear;
-ms-transform-style: preserve-3d;
-ms-transition: all 1.0s linear;
transform-style: preserve-3d;
transition: all 1.0s linear;
}
#sonmy_container:hover #sonmy_card, #sonmy_container.hover_effect #sonmy_card {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);

}
.face {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
.face.back {
display: block;
-webkit-transform: rotateY(180deg);
-webkit-box-sizing: border-box;
-moz-transform: rotateY(180deg);
-moz-box-sizing: border-box;
-o-transform: rotateY(180deg);
-o-box-sizing: border-box;
-ms-transform: rotateY(180deg);
-ms-box-sizing: border-box;
transform: rotateY(180deg);
box-sizing: border-box;
padding: 10px;
color: white;
text-align: center;
background-color: #C8DEDE;
}
/* ---------------- xoay avatar www.sonmyschool.com --------------*/



Sửa postbit/postbit_legacy

Tìm:

<if condition="$show['avatar']">
..............
</if>

Thay bằng:


<if condition="$show['avatar']"><td>
<div id="sonmy_container">
<div id="sonmy_card" class="shadow">
<div class="front face">
<div class="avatardaithinh_ ">
<p class="images">

<a href="member.php?$session[sessionurl]u=$post[userid]"><img src="$post[avatarurl]" $post[avwidth] $post[avheight] alt="<phrase 1="$post[username]">$vbphrase[xs_avatar]</phrase>" border="0" /></a>

</p>
</div>
</div>
<div class="back face center">
<if condition="$post['usertitle']"><div class="smallfont">$post[usertitle]</div></if>
<p>$post[musername]</p>
<img src=images/leverbot.png border="0">
<p> <if condition="$post['rank']"><div class="smallfont">$post[rank]</div></if></p>
<img src=images/leverbot2.png border="0">
</div>
</div>
</div>
</td></if>