<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>转</title> <style> *{ margin: 0; padding:0; } li{ list-style: none; } ul{ position: relative; width: 200px; height: 200px; transform-style: preserve-3d; margin: 250px auto; animation: run 3s infinite linear; } li{ width:200px; height: 200px; opacity: 0.4;/*设置半透明*/ position: absolute; left: 0px; top: 0px; } li:first-child{ transform: translateZ(-100px); background: red; } li:nth-child(2){ transform: translateY(-100px) rotateX(90deg); background: green; } li:nth-child(3){ transform: translateY(100px) rotateX(90deg); background: blue; } li:nth-child(4){ transform: translateX(-100px) rotateY(90deg); background: gold; } li:nth-child(5){ transform: translateX(100px) rotateY(90deg); background: darkviolet; } li:nth-child(6){ background: palegreen; transform: translateZ(100px); } @keyframes run { 0%{ transform: rotateX(0deg) rotateY(0deg); } 100%{ transform: rotateX(360deg) rotateY(360deg); } } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </body> </html>
html5/Css3 3D立方体转圈
最新推荐文章于 2024-01-17 11:11:32 发布