标签：frame stat info 广告轮播 alt ima lin lang center
正方体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>
标签：frame stat info 广告轮播 alt ima lin lang center
原文地址：https://www.cnblogs.com/2020-2-12/p/12608984.html
