------------恢复内容开始------------
效果图如下
代码如下：
<!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>
------------恢复内容结束------------