在一个月的学习后，学会了用代码实现图片的旋转，形成“旋转木马”效果，及立方体和动画特效的添加。
一、图片的旋转
第一步是创建一个图片盒子，将所有图片定位在盒子里，互相重叠。然后根据最终效果，以图片盒子中心为原点，通过transform属性对每一张图片设置相应的位移和旋转角度。最后给图片盒子添加旋转360°的动画效果，并设置景深实现“近大远小”的视觉效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;padding: 0;
}
html,body{
height: 100%;
}
body{
background: url(./images/bg2.jpg);
background-size: 100% 100%;
perspective: 2000px;
}
.box{
width: 280px;
height: 400px;
background: url(./images/a.gif) no-repeat center;
position: fixed;
left: 0;right: 0;
top: 0;bottom: 0;
margin: auto;
transform-style: preserve-3d;
animation: imgRotate 20s linear infinite;
}
.imgBox{
width: 280px;
height: 400px;
position: absolute;
transform-origin: center center -600px;
}
.box img{
display: block;
width: 100%;
height: 100%;
}
.img1{
transform: translateZ(600px);
}
.img2{
transform: translateZ(600px) rotateY(36deg);
}
.img3{
transform: translateZ(600px) rotateY(72deg);
}
.img4{
transform: translateZ(600px) rotateY(108deg);
}
.img5{
transform: translateZ(600px) rotateY(144deg);
}
.img6{
transform: translateZ(600px) rotateY(180deg);
}
.img7{
transform: translateZ(600px) rotateY(216deg);
}
.img8{
transform: translateZ(600px) rotateY(252deg);
}
.img9{
transform: translateZ(600px) rotateY(288deg);
}
.img10{
transform: translateZ(600px) rotateY(324deg);
}
@keyframes imgRotate{
0%{
transform: rotateY(0deg) rotateX(0deg);
}
25%{
transform: rotateY(90deg) rotateX(15deg);
}
50%{
transform: rotateY(180deg) rotateX(0deg);
}
75%{
transform: rotateY(270deg) rotateX(-15deg);
}
100%{
transform: rotateY(360deg) rotateX(0deg);
}
}
</style>
</head>
<body>
<div class="box">
<div class="imgBox img1">
<img src="./images/pic1.jpg" alt="">
</div>
<div class="imgBox img2">
<img src="./images/pic2.png" alt="">
</div>
<div class="imgBox img3">
<img src="./images/pic3.png" alt="">
</div>
<div class="imgBox img4">
<img src="./images/pic4.png" alt="">
</div>
<div class="imgBox img5">
<img src="./images/pic5.jpg" alt="">
</div>
<div class="imgBox img6">
<img src="./images/pic6.png" alt="">
</div>
<div class="imgBox img7">
<img src="./images/pic7.png" alt="">
</div>
<div class="imgBox img8">
<img src="./images/pic8.png" alt="">
</div>
<div class="imgBox img9">
<img src="./images/pic9.png" alt="">
</div>
<div class="imgBox img10">
<img src="./images/pic10.png" alt="">
</div>
</div>
</body>
</html>
二、立方体的实现
立方体的实现与旋转相册的方法大体相同，但有两种方法，其一是：使四个侧面向外移动自身宽高的一半，再旋转90°；第二种方法是：四个侧面向不同方向移动自身宽度的距离，后旋转90°。立方体初始状态搭建好之后，使其循环旋转。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;padding: 0;
}
.box{
width: 300px;
height: 300px;
position: fixed;
left: 0;right: 0;
top: 0;bottom: 0;
margin: auto;
transform-style: preserve-3d;
transform: rotateX(20deg) rotateY(30deg);
transition: 2s;
animation: boxMove 5s infinite linear;
}
.box div{
width: 300px;
height: 300px;
font-size: 60px;
color: #fff;
text-align: center;
line-height: 300px;
position: absolute;
left: 0;top: 0;
opacity: .5;
backface-visibility: hidden;
}
.con1{
background: red;
transform: translateZ(150px);
}
.con2{
background: orange;
transform: translateZ(-150px) rotateY(180deg);
}
.con3{
background: yellowgreen;
transform: translateY(-150px) rotateX(90deg);
}
.con4{
background: blue;
transform: translateY(150px) rotateX(-90deg);
}
.con5{
background: blueviolet;
transform: translateX(-150px) rotateY(-90deg);
}
.con6{
background: powderblue;
transform: translateX(150px) rotateY(90deg);
}
@keyframes boxMove{
0%{
transform: rotateX(0deg) rotateY(0deg);
}
100%{
transform: rotateX(360deg) rotateY(360deg);
}
}
</style>
</head>
<body>
<div class="box">
<div class="con1">1</div>
<div class="con2">2</div>
<div class="con3">3</div>
<div class="con4">4</div>
<div class="con5">5</div>
<div class="con6">6</div>
</div>
</body>
</html>
.box:hover .con1{
background: red;
transform-origin: right center;
transform: rotateY(90deg);
}
.box:hover .con2{
background: orange;
transform-origin: left center;
transform: rotateY(-90deg);
}
.box:hover .con3{
background: yellowgreen;
transform-origin: center top;
transform: rotateX(90deg);
}
.box:hover .con4{
background: blue;
transform-origin: center bottom;
transform: rotateX(-90deg);
}
.box:hover .con5{
background: brown;
transform:translateZ(300px);
}
.box:hover .con6{
background: cyan;
transform: rotateY(180deg);
}
来源：CSDN
作者：Www_yb
链接：https://blog.csdn.net/Www_yb/article/details/104573898