写法思路：
设置一个容器，里面嵌套6个项目分别代表6个面，
容器设置相对定位，3d景深，立体中心点，3d展示方式
其项目设置：一个项目作为底面，四个项目按照情况进行3d翻转，最后一个进行3d平移达到封顶面的效果
效果如下：
结构代码：
<body>
<div class="box">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
<div class="box6">6</div>
</div>
</body>
没旋转之前的样子：
css代码如下
<style>
.box{
width: 300px;
height: 300px;
border: 1px solid #333;
/* 相对定位*/
position: relative;
margin: 100px auto;
/* 设置景深*/
perspective: 12000px;
/* 确定立体中心点*/
perspective-origin: 50% 50%;
/* 表示在3D空间中展示 */
transform-style: preserve-3d;
/*过渡 */
transition: all 8s;
}
.box>div{
width: 100px;
height: 100px;
/*绝对定位 */
position: absolute;
font-size: 20px;
font-weight: bold;
line-height: 100px;
text-align: center;
/*透明度*/
opacity: 0.5;
}
.box1{
top: 0px;
left: 100px;
background-color:red;
/*设置当前项目旋转边为下 */
transform-origin: bottom;
/* 围绕旋转边 逆时针 旋转90度*/
transform: rotateX(-90deg);
}
.box2{
top: 100px;
left: 0;
background-color: orange;
/*设置当前项目旋转边为右 */
transform-origin: right;
/*围绕旋转边 顺时针 旋转90度*/
transform: rotateY(90deg);
}
.box3{
top: 100px;
left: 100px;
background-color: skyblue;
}
.box4{
top: 100px;
left: 100px;
background-color: green;
/*z轴平移时，正值相当于向你靠近，负值远离你*/
transform: translateZ(100px);
}
.box5{
top: 100px;
left: 200px;
background-color: blue;
/*设置当前项目旋转边为左 */
transform-origin: left;
/*围绕旋转边 逆时针 旋转90度*/
transform: rotateY(-90deg);
}
.box6{
top: 200px;
left: 100px;
background-color: purple;
/*设置当前项目旋转边为上 */
transform-origin: top;
/*围绕旋转边 顺时针 旋转90度*/
transform: rotateX(90deg);
}
.box:hover{
/* 鼠标滑过时，沿着底面顺时针旋转720度*/
transform: rotateX(720deg);
}
</style>
