3D图片旋转展示
下面是6个div放置6张周围旋转的图,html如下
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
下面是css样式,body样式为 perspective: 1000px;添加透视效果
body {
perspective: 1000px;
}
section里面放置里面的一张图和设置3d透视
section {
margin: 100px auto;
width: 450px;
height: 300px;
background: url(untitled/2.jpg) no-repeat;
transform-style: preserve-3d;/*设置3d透视*/
position: relative;
transition: 5s linear;/*过渡效果*/
}
设置div样式,脱离文档流
section div {
width: 450px;
height: 300px;
background: url(untitled/7.jpg) no-repeat;
background-size: cover;
position: absolute;
top: 0;
left: 0;
}
section添加伪类:hover,鼠标进入盒子旋转
section:hover {
transform: rotateY(360deg);
}
下面为周边旋转的6张图片的位置
section div:nth-child(1) {
transform: rotateY(0deg) translateZ(500px);
}
section div:nth-child(2) {
transform: rotateY(60deg) translateZ(500px);
}
section div:nth-child(3) {
transform: rotateY(120deg) translateZ(500px);
}
section div:nth-child(4) {
transform: rotateY(180deg) translateZ(500px);
}
section div:nth-child(5) {
transform: rotateY(240deg) translateZ(500px);
}
section div:nth-child(6) {
transform: rotateY(300deg) translateZ(500px);
}
完成!