css3 正方体:
方法
(布局):正方体 有六个面 初始情况下这6个面都在同一位置;
步骤1:设置3d环境
步骤2 使其每个面都 旋转点都是 center center 中心位置 旋转相应角度
再向 相应的x/y/z 平移对应的距离
注意:正方体上下的两个面不需要旋转 只需要在z轴上 前后平移即可
示意图:
知识要点:
Stransform:translate 位移
Stransform:orign 旋转基点
transform-style: preserve-3d; 设置3d环境
perspective: ;设置景深
代码:
**css样式**
* {
margin: 0;
padding: 0;
}
body {
transform-style: preserve-3d;
perspective: 800px;
}
.box {
width: 300px;
height: 300px;
/* background: rgba(0, 0, 0, 0.5); */
position: relative;
margin: auto;
margin-top: 20px;
transform-style: preserve-3d; /* 设置3d环境 */
}
div {
width: 200px;
height: 200px;
position: absolute;
/* background: rgba(200, 0, 0, 0.5); */
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
text-align: center;
line-height: 200px;
}
.box1 {
transform: translateX(100px) rotateY(90deg);
background: rgba(0, 255, 60, 0.5);
/* 背景颜色旋转rgba 设置成半透明状态 方便查看效果*/
}
.box2 {
transform: translateX(-100px) rotateY(90deg);
background: rgba(204, 38, 212, 0.5);
}
.box3 {
transform: translateZ(-100px) rotateY(180deg);
background: rgba(0, 4, 255, 0.5);
}
.box4 {
transform: translateY(100px) rotateX(90deg);
background: rgba(255, 123, 0, 0.5);
}
.box5 {
transform: translateY(-100px) rotateX(90deg);
background: rgba(25, 0, 221, 0.5);
}
.box6 {
transform: translateZ(100px);
background: rgba(255, 0, 119, 0.5);
}
布局:
<!--
布局 :先设定好正方体的来个面 6个box
让六个box 在同一位置 就需要给他们都加上定位
在3d环境下 每个面按照各 各个特定的旋转基地 开始旋转 相应的度数 之后在平移(x )/( y)/(z) 距离 -->
<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>
</div>