Cho xin góp 1 viên gạch nhé, đừng chém em tội nghiệp, trong file .tpl các bạn thay bằng code sau sẽ có hiệu ứng 3d theo trục X hoặc Y chỉ cần thay <div class="rotate y"> bằng <div class="rotate x">
code tpl như sau, anh em chỉnh sửa cho mượt hơn:
<!-- BEGIN: main -->
<style type="text/css">
ul.weblinks{padding:0; margin:0}
ul.weblinks li{width:50%;float: left;}
ul.weblinks li div{padding:0px;}
ul.weblinks li a{display:block;text-align:center;width:100%}
ul.weblinks li a img{max-width:100%;text-align:center;border:1px #777 solid;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
div.flip{
position:relative;
width: 110px; /* Set default width of flip */
height: 80px; /* Set default height */
-webkit-perspective: 600px; /* larger the value, the less pronounced the 3D effect */
-moz-perspective: 600px;
-o-perspective: 600px;
perspective: 600px;
}
div.flip div.rotate{
width: 100%;
height: 100%;
-moz-transform-style: preserve-3d; /* Specify all child elements inside this DIV maintain the same perspective */
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
-moz-transition: all 0.6s ease-in-out 0.3s; /* final 0.3s specifies delay before effect kicks in */
-webkit-transition: all 0.6s ease-in-out 0.3s;
-o-transition: all 0.6s ease-in-out 0.3s;
transition: all 0.6s ease-in-out 0.3s;
}
div.flip div.rotate > *{ /* Target all children elements */
position:absolute;
width: 100%;
height: 100%;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
div.flip div.rotate > div{ /* Target all child DIVs */
-webkit-box-sizing: border-box; /* Specify that any border/ paddings do not add to the DIV's total width */
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 8px;
background: #eee;
}
div.rotate.x *:nth-child(2){ /* X Axis rotate specific CSS. Rotate 2nd child DIV 180deg in the X axis */
-moz-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
}
div.flip:hover > div.rotate.x{ /* X Axis rotate specific CSS. Rotate div.rotate.x when mouse rolls over container */
-moz-transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
}
div.rotate.y *:nth-child(2){ /* Y Axis rotate specific CSS. Rotate 2nd child DIV 180deg in the Y axis so it mirrors the first */
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
div.flip:hover > div.rotate.y{ /* Y Axis rotate specific CSS. Rotate div.rotate.y when mouse rolls over container */
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
</style>
<div class="clearfix">
<ul class="weblinks">
<!-- BEGIN: loop -->
<li style="margin-bottom:-20px;">
<div class="flip" style="display: inline-block; margin-right: 10px">
<div class="rotate y">
<a href="{LOOP.url}" title="{LOOP.title}"><img src="{LOOP.urlimg}"></a>
<a href="{LOOP.url}" title="{LOOP.title}"><img src="{LOOP.urlimg}"></a>
</div>
<div>
</li>
<!-- END: loop -->
</ul>
</div>
<!-- END: main -->
ductrung thích điều này.
