【示例地址】 做学习用,
1、速度放慢,大家可以看清移动过程,使用时可设置成0.2s;
2、为保证代码简洁,只写了webkit内核的效果,请用chrome打开查看。
【初始状态】
【拉开】
【页面前后顺序颠倒】
【收起】
<div class="translate3d">
<span class="front"><b>前</b></span>
<span class="back"><b>后</b></span>
</div>
.translate3d{
font-size:100px;
width:1000px;height:160px;
position:absolute;top:50%;left:50%;margin:-80px 0 0 -500px;
text-align:center;line-height:160px;
font-weight:bold;text-shadow:0 0 5px #fff;
-webkit-transform-style: preserve-3d;
}
.translate3d span { display:inline-block; -webkit-transition: all 3s ease-in-out; }
.translate3d b { height:160px; width: 120px; display:block;
border-radius:5px; box-shadow:0 0 10px #000;background:#aaa; padding:40px; }
/*初始*/
.translate3d .front { -webkit-transform:translateZ(100px); }
.translate3d .back { -webkit-transform:translateZ(40px);margin-left: -227px; }
/* 平滑移开 */
.translate3d-hover .front { margin-left: -60px; -webkit-transform: scale(0.9); }
.translate3d-hover .back { margin-left: -27px; -webkit-transform: scale(1.1); }
/* 前后页颠倒,平滑收起 */
.translate3d-hover2 .front { margin-left: 0px; -webkit-transform: scale(1) translateZ(40px); }
.translate3d-hover2 .back { margin-left: -227px; -webkit-transform: scale(1) translateZ(100px); }
function ease2(){
$('.translate3d').addClass("translate3d-hover2");
};
$('.translate3d').hover(function(){
$(this).addClass("translate3d-hover");
var t = setTimeout( ease2, 3000);
})