web前端——旋转3D魔方

前端css实现3D魔方，先看一下效果图：

盒子布局

将3D魔方的6个面包裹在一个父盒子中

<div class="content">
  <div class="parent">
    <div class="div1">上</div>
    <div class="div2">下</div>
    <div class="div3">左</div>
    <div class="div4">右</div>
    <div class="div5">前</div>
    <div class="div6">后</div>
  </div>
</div>

添加3D效果

1. 给父盒子添加相对定位和3D属性

.parent {
   
/* 相对定位 */
	position: relative;
	width: 400px;
	height: 400px;
	margin: 200px auto;
	/* 3D属性 */
	transform-style: preserve-3d;
	/* 旋转动画 */
	animation-name: rotate;
	animation-duration: 10s