css实现旋转相册

最新推荐文章于 2024-07-31 10:00:56 发布

_ouo_

最新推荐文章于 2024-07-31 10:00:56 发布

阅读量3.4k

点赞数 5

分类专栏： css3 html 文章标签： css3 HTML

本文链接：https://blog.csdn.net/zerogf/article/details/79061902

版权

html 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

css3

6 篇文章 0 订阅

订阅专栏

个人博客链接： 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、效果展示图