正方体4个面广告滚动：
纵向4个面为广告图片，通过动画自动旋转播放显示如图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
width: 200px;
height: 200px;
/*border: 1px solid #000;*/
margin: 0 auto;
margin-top: 150px;
list-style: none;
transform-style:preserve-3d;/*给父元素设置该属性可将子元素以3D效果展示，默认为2D*/
position: relative;
transform: rotateX(0deg) rotateY(0deg);
animation: xuanzuan 10s linear 0s infinite;
}
ul:hover{
animation-play-state:paused;
}
@keyframes xuanzuan {
from{
transform: rotateX(0deg);
}
to{
transform: rotateX(360deg);
}
}
ul li{
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
font-size: 40px;
position: absolute;
left: 0;
top: 0;
}
ul li:nth-of-type(1){
background-color: red;
transform:rotateX(360deg) translateZ(100px);
}
ul li:nth-of-type(2){
background-color: green;
transform:rotateX(270deg) translateZ(100px);
}
ul li:nth-of-type(3){
background-color: blue;
transform:rotateX(180deg) translateZ(100px);
}
ul li:nth-of-type(4){
background-color: yellow;
transform:rotateX(90deg) translateZ(100px);
}
ul li:nth-of-type(5){
background-color: salmon;
transform:rotateY(90deg) translateZ(100px) ;
}
ul li:nth-of-type(6){
background-color: fuchsia;
transform:rotateY(270deg) translateZ(100px) ;
}
img{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div>
<hr>
<ul>
<li><img src="video/images/girl.jpg" alt=""></li>
<li><img src="video/images/banner2.jpg" alt=""></li>
<li><img src="video/images/banner3.jpg" alt=""></li>
<li><img src="video/images/banner4.jpg" alt=""></li>
<li><img src="video/images/banner4.jpg" alt=""></li>
<li><img src="video/images/banner4.jpg" alt=""></li>
</ul>
<hr>
</div>
</body>
</html>
原文地址：https://www.cnblogs.com/2020-2-12/p/12608984.html
时间： 2024-10-29 12:32:57