CSS3—正方体广告轮播
2021-03-29 10:25
标签：frame stat info 广告轮播 alt ima lin lang center 正方体4个面广告滚动： 纵向4个面为广告图片，通过动画自动旋转播放显示如图： CSS3—正方体广告轮播 标签：frame stat info 广告轮播 alt ima lin lang center 原文地址：https://www.cnblogs.com/2020-2-12/p/12608984.html
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>Titletitle>
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>