标签：定义 ast rspec 并且 数值 no-repeat 图片 top sla
我发现现在很多网站都使用了这种效果，比如说锤子官网、elementui官网、秒味课堂等，不单单有鼠标跟随的效果，随着鼠标的移动还有视觉差的效果，看起来很高大上的技术，其实实现起来很简单，主要利用css3的transform-style和persperctive属性。
废话不多说直接上代码：
html：
<div class="perspective">
<div class="preserve3d">
<span class="preserve3d_img"></span>
<span class="preserve3d_text">以傲慢与偏执<br/>回敬傲慢与偏见</span>
</div>
</div>
css：
关键设置：
1、为外层容器设置perspective属性，这个属性值可以自定义可以是数值、top/bottom等
2、把你想要设置为视觉差的元素设置为绝对定位，并且添加transform：tanslateZ（deg）属性
* {
font-family: "Microsoft YaHei";
transition: all .3s;
-webkit-transition: all .3s;
transition-timing-function: linear;
-webkit-transition-timing-function: linear;
}
.perspective {
perspective: 800px;
}
.preserve3d {
position: relative;
width: 600px;
height: 300px;
margin: 100px auto;
background: url("http://static.smartisanos.cn/index/img/store/home/banner-3d-item-1-box-1_61bdc2f4f9.png") center no-repeat;
background-size: 100% 100%;
border-radius: 10px;
transform-style: preserve-3d;
}
.preserve3d_img {
position: absolute;
width: 100%;
height: 100%;
bottom: 11px;
left: 0;
background: url("http://static.smartisanos.cn/index/img/store/home/banner-3d-item-1-box-3_8fa7866d59.png") center no-repeat;
background-size: 95% 100%;
-webkit-transform: translateZ(60px);
}
.preserve3d_text {
position: absolute;
top: 20%;
right: 10%;
font-size: 30px;
color: #fff;
text-align: right;
font-weight: lighter;
-webkit-transform: translateZ(40px);
}
js：
$(‘.preserve3d‘).on(‘mouseenter‘, function() {
var thisPX = $(this).offset().left;
var thisPY = $(this).offset().top;
var boxWidth = $(this).outerWidth();
var boxHeight = $(this).outerHeight();
$(this).addClass("smart_3d");
})
.on(‘mousemove‘, function(event) {
var mouseX = event.pageX - thisPX;
var mouseY = event.pageY - thisPY;
var X = mouseX - boxWidth/2;
var Y = boxHeight/2 - mouseY;
$(this).css({
"-webkit-transform": "rotateY(" + X / 50 + "deg) " + "rotateX(" + Y / 50 + "deg)"
});
})
.on(‘mouseleave‘, function() {
$(this).removeClass("smart3d");
$(this).css({
"-webkit-transform": "rotateY(0deg) rotateX(0deg)"
})
})
ok,就是这么简单~还可以直接做成jQuery插件，具体参考： https://github.com/tian0o0/html5/tree/master/smart_banner
标签：定义 ast rspec 并且 数值 no-repeat 图片 top sla
原文地址：http://www.cnblogs.com/tian0o0/p/7857728.html
