首先写一个正方体我们需要了解CSS中的2D和3D属性。
-
transform-style: preserve-3d;：这个属性必不可少 -
translate()：通过 translate() 方法，元素从其当前位置移动，根据给定的 X轴坐标和Y 轴坐标位置参数。
-
rotateX()：通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转
-
rotateY()：通过 rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转
-
rotateZ()：通过 rotateZ() 方法，元素围绕其 Z 轴以给定的度数进行旋转
了解知道以上属性后就可以进行编写。
具体代码如下：
HTML部分
<body>
<div class="box">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
<div class="six"></div>
</div>
</body>
CSS部分
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 500px;
height: 500px;
transform: translate(-50%,-50%) rotateX(45deg) rotateY(45deg);
transform-style: preserve-3d;
}
.box div{
width: 200px;
height: 200px;
border: black 1px solid;
position: absolute;
// 给盒子进行定位，将全部盒子合并在一起
left: 400px;
top: 250px;
opacity: 0.5;
// 给所有盒子设置一个透视属性
}
.one{
background: red;
transform: translate(-50%,-50%);
transform: translateZ(100px);
}
.two{
background: yellow;
transform: translate(-50%,-50%);
transform: translateZ(-100px);
}
.three{
background: green;
transform: translate(-50%,0) translateX(200px) rotateY(90deg);
}
.four{
background: blue;
transform: translate(-50%,0) translateX(0px) rotateY(90deg);
}
.five{
transform: translate(-50%,-50%) translateX(100px) rotateX(90deg);
background: blueviolet;
}
.six{
transform: translate(0%,-50%) translateY(200px) rotateX(90deg);
background: brown;
}
</style>
转载：https://blog.csdn.net/J_LAIDA/article/details/106459517
查看评论