<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0; list-style: none; } ul{ width: 200px; height: 200px; margin: 200px auto; position: relative; transform-style: preserve-3d; animation:play 6s linear infinite ; } @keyframes play { from{ transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); } to{ transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); } } li{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; } li:nth-child(1){ background-color: deepskyblue; transform: translateZ(100px); } li:nth-child(2){ background-color: yellowgreen; transform: rotateX(90deg) translateZ(100px); } li:nth-child(3){ background-color: gold; transform: rotateX(180deg) translateZ(100px); } li:nth-child(4){ background-color: palevioletred; transform: rotateX(270deg) translateZ(100px); } li:nth-child(5){ background-color: magenta; transform: rotateY(90deg) translateZ(100px); } li:nth-child(6){ background-color: saddlebrown; transform: rotateY(270deg) translateZ(100px); } </style> </head> <body> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html>
立方体
猜你喜欢
转载自blog.csdn.net/lx_dfc/article/details/80462229
今日推荐
周排行