运用CSS3 3D转换实现案例—旋转木马
程序员文章站
2022-03-19 15:57:34
...
1.首先搭建HTML结构
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
里面的六个div分别是想要插入的图片
最后旋转的还是section这个标签
2.CSS样式
1.给body添加透视效果 perspective:1000px;
2.给section添加3d呈现效果控制里面的6个div
3.里面的六个div全部绝对定位叠到一起,然后移动不同角度旋转和距离
角度用rotateY,距离用translateZ来控制
4.给section添加动画animation,即可自动旋转
body{
/*添加透视*/
perspective: 1000px;
}
section{
position: relative;
width: 300px;
height: 200px;
/*为子盒子开启三维立体环境*/
transform-style: preserve-3d;
/*谁做动画给谁加*/
animation: play 10s linear infinite;
}
/*鼠标经过 停止旋转*/
section:hover{
animation-play-state: paused;
}
@keyframes play{
0%{
transform: rotateY();
}
100%{
transform: rotateY(360deg);
}
}
section div{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('输入图片');
}
section div:nth-child(1){
transform: translateZ(300px);
}
section div:nth-child(2){
transform: rotateY(60deg) translateZ(300px);
}
section div:nth-child(1){
transform: rotateY(120deg) translateZ(300px);
}
section div:nth-child(1){
transform: rotateY(180deg) translateZ(300px);
}
section div:nth-child(1){
transform: rotateY(240deg) translateZ(300px);
}
section div:nth-child(1){
transform: rotateY(300deg) translateZ(300px);
}
推荐阅读