旋转相册(html+css实现)
效果图
![](https://i-blog.csdnimg.cn/blog_migrate/d973b408b267d89e9a04febba4402c87.png)
css代码
body {
background:linear-gradient(to top,rgb(207, 76, 76),rgb(93, 93, 206),rgb(130, 244, 130));
}
.box {
width: 200px;
height: 200px;
position:relative;
margin:300px auto;
transform-style: preserve-3d;
}
.box-1 {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
animation:myrotation 6s linear infinite;
}
.box-1>img {
width: 100%;
height: 100%;
}
.left {
transform: translateX(-100px) rotateY(-90deg);
}
.right {
transform: translateX(100px) rotateY(90deg);
}
.top {
transform: translateY(-100px) rotateX(-90deg);
}
.bottom {
transform: translateY(100px) rotateX(90deg);
}
.front {
transform: translateZ(100px);
}
.behind