要实现类似3D转动效果主要使用到CSS3的一些特性。
下面主要介绍一些transform中的属性的效果和作用:
1.transform-style:一般是块级元素使用此属性,使用了此属性后的块级元素会在保持3D效果,但是如果仅仅使用此属性是不会看出3D特效的,必须和其他的属性一起使用才能呈现出3D效果。
2.perspective:perspective(x px)属性指定观察者与Z轴的距离,单位px。这样会有透视效果。
3.rotateX,rotateY,rotateZ:这三个属性其实是一个,指定元素沿X轴,Y轴和Z轴旋转的角度,类型变形的一种效果,单位是deg(角度)。
4.translateX,translateY,translateZ:指定该元素沿着X轴,Y轴或者Z轴平移的距离,可以为正值也可以为负值,单位是px;
3D旋转效果的思路:
将6张图片分别设置transform的属性,使之能在页面上静态的形成一个正方体效果,然后使用js 动态地设置包裹整个正方体的div的transform的值,这样就实现了3D旋转效果的。
以下是部分代码结构
1.html部分的div布局
<div class="imgBox">
<div class="top"></div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="front"></div>
<div class="back"></div>
</div>
2.分别设置上下左右顶部和底部6个div块的样式
.imgBox{
width: 200px;
height: 200px;
margin-top: 200px;
margin-left: 300px;
position: relative;
transform-style: preserve-3d;
transform: perspective(700px) rotateY(-60deg) rotateX(45deg);
}
.imgBox div{
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
box-shadow: 10px 10px 150px #5fbdff;
}
.top{
background: url(image/3D_img/img1.jpg) no-repeat;
transform: translateZ(100px);
}
.bottom{
background: url(image/3D_img/img2.jpg) no-repeat;
transform: translateZ(-100px);
}
.left{
background: url(image/3D_img/img3.jpg) no-repeat;
transform: rotateX(90deg) translateZ(-100px);
}
.right{
background: url(image/3D_img/img4.jpg) no-repeat;
transform: rotateX(90deg) translateZ(100px);
}
.front{
background: url(image/3D_img/img5.jpg) no-repeat;
transform: rotateY(90deg) translateZ(-100px);
}
.back{
background: url(image/3D_img/img6.jpg) no-repeat;
transform:rotateY(90deg) translateZ(100px);
}
3.js代码部分
window.onload=function(){
img_box = document.querySelector('.imgBox');
var x = 0;
var y = 0;
function trans(){
x = x + 10;
y = y + 10;
img_box.style.transform='perspective(700px) rotateY('+x+'deg) rotateX('+y+'deg)';
}
setInterval(trans,500);//每隔0.5s调用trans函数
}
很简单的一个小特效,有兴趣的同学自己做一个试试吧。