css实现旋转相册

关注

原创最新推荐文章于 2026-03-10 03:59:55 发布 3.5k 阅读 AI 写同款· GEO 优化 ›

3D动画一一旋转相册(纯CSS,HTML) 旋转相册,是CSS3,3D动画中一个典型的案例,今天,我们通过CSS,和HTML来实现这个动画效果以上便是3D——旋转相册的实现(因为内存原因无法长传gif图,可自行复制代码,更改本地图片实现)，关于本篇文章，如果有更好的方法，或者是错误，不足等，请在评论区留言博主，小编在这里及时更改。阅读详情

个人博客链接： http://kingsman96.top/home 欢迎来访！！！！

1、html代码

<ul>
  <li><img src="images/m1.jpg"/></li>
  <li><img src="images/m2.jpg"/></li>
  <li><img src="images/m5.jpg"/></li>
  <li><img src="images/m6.jpg"/></li>
  <li><img src="images/mm2.jpg"/></li>
  <li><img src="images/mm4.jpg"/></li>
</ul>

2、css代码

ul{
width: 200px;
height: 200px;
margin: 200px auto;
position: relative;
transform-style: preserve-3d;
animation: lws 5s infinite linear;
}
ul li{
list-style: none;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
position: absolute;
}
ul li img{
width: 200px;
height: 200px;
}
ul li:nth-child(1){
background: red;
transform: rotateY(60deg) translateZ(200px);
}
ul li:nth-child(2){
background-color: purple;
transform: rotateY(120deg) translateZ(200px);
}
ul li:nth-child(3){
background-color: blue;
transform: rotateY(180deg) translateZ(200px);
}
ul li:nth-child(4){
background-color: orangered;
transform: rotateY(240deg) translateZ(200px);
}
ul li:nth-child(5){
background-color: yellow;
transform: rotateY(300deg) translateZ(200px);
}
ul li:nth-child(6){
background-color: cyan;
transform: rotateY(360deg) translateZ(200px);
}
@keyframes lws{
from{
transform: rotateX(-20deg) rotateY(0deg);
}
to{
transform: rotateX(-20deg) rotateY(360deg);
}
}
ul:hover{
animation-play-state: paused;
}
ul:hover li img{
opacity: .8;
}
ul li:hover img{
opacity: 1;
}

3、效果展示图