1.思路
- 先准备一个盒子写相等的宽高,里面放六个相同子盒子标签,宽高都和父元素相等,然后同时将六个子元素定位,再通过3d旋转+位移使六个子元素到达指定位置,成为立方体的六个面,定义动画使其运动起来
2.步骤
- 1.写好父元素和六个子元素并定义宽高和位置
<div class="p">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
- 2.给body加视距
body {
perspective: 500px;/*以body的视角进行观测下面所有的子元素,形成统一的透视感*/
}
- 3.父元素设置3d权限,子元素做3D转化可呈现出来
.p {
width: 300px;
height: 300px;
margin: 0 auto;
margin-top: 200px;
position: relative;