首先我们来学习一下正方体的几何解构。
分为上下左右前后6个面,所以我们先创建6个正方形面,然后利用定位让他们都重叠在一起。然后利用移动+旋转将这6个面拼凑成一个正方体。具体代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.box
{
width: 200px;
height: 200px;
margin: 100px auto;
position: relative;
/* 让box默认旋转,方便观察 */
transform: rotate3d(1,1,0,-30deg);
transform-style: preserve-3d;
/* 添加透视景深 默认观察点在正方体正中心横截面 100px在盒子内部*/
/* perspective: 100px; */
perspective: 214px;
/* perspective-origin: ;设置透视的默认观察角度 */
perspective-origin:-100px 100px ;
}
.box>div{
width: 100%;
height: 100%;
position: absolute;
opacity: 0.5;
}
.front{
background-color: springgreen;
/* 过渡完了会回到原始的状态 */
transform: translateZ(100px);
/* transform-style: ; 可以让被转换的元素保留其3D转换
需要设置在父元素中
flat:不保留
preserve-3d:保留
*/
}
.back{
background-color: blueviolet;
transform: translateZ(-100px) rotateY(180deg);
}
.left{
background-color: red;
transform: translateX(-100px) rotateY(-90deg);
}
.right{
background-color: yellow;
transform: translateX(100px) rotateY(90deg);
}
.top{
background-color: blue ;
transform: translateY(-100px) rotateX(90deg);
}
.bottom{
background-color: aqua;
transform: translateY(100px) rotateX(-90deg);
}
</style>
</head>
<body>
<div class="box">
<div class="front">front</div>
<div class="back">back</div>
<div class="left">left</div>
<div class="right">right</div>
<div class="top">top</div>
<div class="bottom">bottom</div>
</div>
</body>
</html>```