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

Demo: http://sonmyschool.com/forum/showthr...on-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:

Code:

---

    /* ---------------- 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:

Code:

---

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

---

Thay bằng:

Code:

---

            <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>

---