效果图如上,一个3D轮播长方体广告
代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3D转换模块之长方体轮播图</title> <style> *{ margin: 0; padding: 0; } body{ perspective: 500px; } ul{ width: 200px; height: 200px; box-sizing: border-box; margin: 100px auto; position: relative; transform-style: preserve-3d; transform: rotateY(0deg) rotateX(0deg); animation: sport 5s linear 0s infinite; } ul li{ list-style: none; width: 200px; height: 200px; font-size: 60px; text-align: center; line-height: 200px; position: absolute; } ul li img{ width: 200px; height: 200px; } ul li:nth-child(1){ background-color: red; transform: rotateX(90deg) translateZ(100px) scale(2,1); } ul li:nth-child(2){ background-color: yellow; transform: rotateX(180deg) translateZ(100px) scale(2,1); } ul li:nth-child(3){ background-color: pink; transform: rotateX(270deg) translateZ(100px) scale(2,1); } ul li:nth-child(4){ background-color: skyblue; transform: rotateX(360deg) translateZ(100px) scale(2,1); } ul li:nth-child(5){ background-color: blue; transform: rotateY(90deg) translateZ(200px); } ul li:nth-child(6){ background-color: tomato; transform: rotateY(90deg) translateZ(-200px); } @keyframes sport { from{ transform: rotateX(0deg); } to{ transform: rotateX(360deg); } } </style> </head> <body> <ul> <li><img src="../images/lb1.jpg" alt=""></li> <li><img src="../images/lb2.jpg" alt=""></li> <li><img src="../images/lb3.jpg" alt=""></li> <li><img src="../images/lb4.jpg" alt=""></li> <!--<li>1</li>--> <!--<li>1</li>--> <!--<li>1</li>--> <!--<li>1</li>--> <li>小凝</li> <li>爱你</li> </ul> </body> </html>