<style type="text/css">
*{ margin: 0; padding: 0; } ul{ position: relative; width: 200px; height: 200px; margin: 200px auto; transform-style: preserve-3d; animation: run 3s linear infinite; animation-fill-mode: none; } ul li { position: absolute; list-style: none; left: 0; top: 0; width: 200px; height: 200px; opacity: 0.5; /* 透明度 */ } ul li:first-child { transform: translateY(100px) rotateX(90deg); background: red; } ul li:nth-child(2) { transform: translateX(100px) rotateY(90deg); background: blue; } ul li:nth-child(3) { transform: translateY(-100px) rotateX(90deg); background: green; } ul li:nth-child(4) { transform: translateX(-100px) rotateY(90deg); background: yellow; } ul li:nth-child(5) { transform: translateZ(-100px); background: orange; } ul li:last-child { transform: translateZ(100px); background: pink; } @keyframes run { 0% { transform: rotateX(0deg) rotateY(0deg); } 100% { transform: rotateX(360deg) rotateY(360deg); } }</style>
//下面是正方形的6个面
<body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </body>