------------恢复内容开始------------
效果图如下
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>立方体</title> <style> *{margin: o;padding: 0;} body{background: black;} .box{ width: 400px; height: 400px; border: 1px solid red; margin: 30px auto; perspective: 1200px; } .box ul{ width: 300px; height: 300px; border: 1px solid blue; margin: 48px; position:relative; transform-style: preserve-3d; animation: move 2s infinite linear; transform-origin:center center 150px ; } .box ul li{ width: 300px; height: 300px; list-style: none; font-size: 30px; color: #ffffff; text-align: center; line-height: 300px; position: absolute; } .box ul li:nth-of-type(1){background:red ; opacity: 0.5;} .box ul li:nth-of-type(2){background:blue ; opacity: 0.5; transform:translateX(300px) rotateY(-90deg) ;transform-origin: left;} .box ul li:nth-of-type(3){background: yellow; opacity: 0.5;transform:translateX(-300px) rotateY(90deg);transform-origin: right;} .box ul li:nth-of-type(4){background:pink ; opacity: 0.5;transform: translateY(-300px) rotateX(-90deg);transform-origin:bottom;} .box ul li:nth-of-type(5){background:green ; opacity: 0.5;transform: translateY(300px) rotateX(90deg);transform-origin:top;} .box ul li:nth-of-type(6){background:peru ; opacity: 0.5;transform: translateZ(300px);} @keyframes move{ from{transform:rotateY(0deg);} to{transform: rotateY(360deg);} } </style> </head> <body> <!-- 知识点： 1.定位 2.移动物体的位置：transform:translate(length) 平移 rotate(angle) 旋转；X水平的轴，Y垂直的轴 ，Z眼睛垂直屏幕的那个轴 3.3D场景的设置 transform-style：preserve-3d;需要添加在咱们所有变形元素的父元素上 perspective：1200px；景深，看物体的远近，数值较大的时候意味着 看物体的距离很远 4.动帧动画，animation @keyframes 动画名称{ from{css属性} to{css属性} } --> <div class="box"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </div> </body> </html>
------------恢复内容结束------------