版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
目录
1.需求:
2.步骤详解:
2.1.布局
布局是最外层div(控制里面的属性)包括6个div
<div class="box">
<div class="front"></div>
<div class="left"></div>
<div class="back"></div>
<div class="right"></div>
<div class="top"></div>
<div class="bottom"></div>
</div>
现在是6个div重合在同一个面上,我们只需要调节各个面的位置,进行平移旋转就可以得到需求了。
2.2. 分别对样式调节
这6个div代表正方体的6个面,只需要写出来3个面,另外3个面的样式取反就可以了,例如左右面
.left{
background:blue;
transform: translateX(-100px) rotateY(90deg);
}
.right{
background:orange;
transform: translateX(100px) rotateY(-90deg);
}
让左边的面left向左平移100px,然后围绕y轴旋转90度就能得到需求,然后right面取反,就能得到右面。剩下的4个面是同理。
3.改变视角(不是必须)
/*改变观察者距离正方体的距离*/
perspective:676px;
/*控制观察者在正方体上下左右的视角*/
perspective-origin:-149px 74px;
这里对box加一个样式,可以在chrome控制台里方便地对正方体进行360°的观察。
4.完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
.box {
width: 200px;
height: 200px;
margin: 100px auto;
position: relative;
/*让box旋转30度,方便观察设计*/
transform: rotate3d(1,1,0,-30deg);
/*保留旋转之后的样式*/
transform-style: preserve-3d;
/*改变观察者距离正方体的距离*/
perspective:676px;
/*控制观察者在正方体上下左右的视角*/
perspective-origin:-149px 74px;
}
/*box下的通用div样式*/
.box>div {
width: 100%;
height: 100%;
position: absolute;
}
.front {
background: rgb(111,111,111,0.1);
/*前移100px*/
transform: translateZ(100px);
}
.back {
background: green;
transform: translateZ(-100px);
}
.left{
background:blue;
transform: translateX(-100px) rotateY(90deg);
}
.right{
background:orange;
transform: translateX(100px) rotateY(-90deg);
}
.top{
background: purple;
transform:rotateX(-90deg) translateZ(-100px);
}
.bottom{
background: #8d1025;
transform:rotateX(-90deg) translateZ(100px);
}
</style>
</head>
<body>
<div class="box">
<div class="front"></div>
<div class="left"></div>
<div class="back"></div>
<div class="right"></div>
<div class="top"></div>
<div class="bottom"></div>
</div>
</body>
</html>