一、效果
旋转图片
二、代码实现
1、HTML部分
<div id="photos-box">
<img src="../beijingc.jpg" alt="无法显示">
<img src="../beijing8.jpg" alt="无法显示">
<img src="../beijing5.jpg" alt="无法显示">
<img src="../beijing1.jpg" alt="无法显示">
<img src="../beijing2.jpg" alt="无法显示">
<img src="../beijing3.jpg" alt="无法显示">
<img src="../beijing7.jpg" alt="无法显示">
</div>
2、CSS部分
body{
background: black;
}
*{
margin: 0px;
padding: 0px;
}
#photos-box{
width: 400px;
height: 300px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: 200px auto;
transform-style: preserve-3d;
transform: rotateX(-10deg) rotateY(0deg);
animation: run 30s linear infinite;
}
#photos-box img{
width: 350;
height: 250px;
border: 3px solid #C7C2C2;
border-radius: 5px;
position: fixed;
left: 0;
top: 0px;
}
#photos-box img:nth-child(1){
transform: rotateY(0deg) translateZ(500px);
}
#photos-box img:nth-child(2){
transform: rotateY(60deg) translateZ(500px);
}
#photos-box img:nth-child(3){
transform: rotateY(120deg) translateZ(500px);
}
#photos-box img:nth-child(4){
transform: rotateY(180deg) translateZ(500px);
}
#photos-box img:nth-child(5){
transform: rotateY(240deg) translateZ(500px);
}
#photos-box img:nth-child(6){
transform: rotateY(300deg) translateZ(500px);
}
#photos-box img:nth-child(7){
transform: rotateY(360deg) translateZ(500px);
}
@keyframes run{
0%{transform: rotateX(0deg) rotateY(0deg); }
20%{transform: rotateX(10deg) rotateY(72deg);}
40%{transform: rotateX(0deg) rotateY(144deg);}
60%{transform: rotateX(-10deg) rotateY(216deg);}
80%{transform: rotateX(0deg) rotateY(288deg);}
100%{transform: rotateX(10deg) rotateY(360deg);}
}