一定要想明白是怎么绕X Y Z轴旋转，脑子里要有画面，要得到下面图片效果，要知道每一个面是垂直于哪个轴，怎么倾斜移动，旋转，有一个清晰的思路才能做出来。自己先做一下一点一点给出框架，先给出6个盒子再去摆放位置。
效果图：
整体代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D</title>
<style>
*{
padding: 0;
margin: 0;
}
.d1{width: 800px;
height: 800px;
display: flex;
flex-wrap: wrap;
border: 1px solid black;}
.container{
width: 200px;
height: 200px;
margin: 100px 0 0 100px;
}
.cube{
/* width: 200px; */
width: 100%;
height: 100%;
transform-style: preserve-3d;
backface-visibility: visible;
perspective-origin: 100% 100%;
}
.cube1{ width: 100%;
height: 100%;
transform-style: preserve-3d;
backface-visibility: visible;
perspective-origin: 150% 150%;}
.cube2{width: 100%;
height: 100%;
transform-style: preserve-3d;
backface-visibility: visible;
perspective-origin: 200% 200%;}
.cube3{width: 100%;
height: 100%;
transform-style: preserve-3d;
backface-visibility: visible;
perspective-origin: 300% 300%;}
.perspective250{
perspective: 550px;
}
.face{
position: absolute;
font-size: 60px;
width: 100px;
height: 100px;
background-color: rgb(35, 35, 25);
margin-top: 10px;
line-height: 100px;
text-align: center;
color: aliceblue;
}
.front{
background: rgba(5,7, 8, 0.3);
transform: translateZ(50px);
}
.back{
background: rgba(58, 147, 90, 0.7);
transform:rotateY(180deg) translateZ(50px) ;
}
.right{
background:rgba(194, 30, 30, 0.6) ;
transform: rotateY(90deg) translateZ(50px);
}
.left{
background: rgba(39, 24, 141, 0.6);
transform: rotateY(-90deg) translateZ(50px);
}
.top{
background-color: rgba(178, 194, 30, 0.6);
transform: rotateX(-90deg) translateZ(50px);
}
.bottom{
background-color: rgba(194, 30, 145, 0.6);
transform: rotateX(90deg) translateZ(50px);
}
</style>
</head>
<body>
<div class="d1">
<div class="container">
<div class="cube perspective250">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</div>
<div class="container">
<div class="cube1 perspective250">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</div>
<div class="container">
<div class="cube2 perspective250">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</div>
<div class="container">
<div class="cube3 perspective250">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</div>
</div>
</body>
</html>解析：
- 首先，使用通配选择器
*清除了所有元素的内边距和外边距。这样操作显得专业 - 定义了一个类
.d1，作为容器，设置了宽度、高度、弹性布局和边框。 - 类
.container用于包裹每个 3D 盒子，设置了宽度、高度和外边距。 - 类
.cube、.cube1、.cube2、.cube3用于创建 3D 盒子，设置了transform-style为preserve-3d以保持 3D 效果，backface-visibility为visible以显示背面，perspective-origin指定透视点。 - 类
.perspective250设置了透视值。 - 各个面的类通过绝对定位、设置背景颜色、字体大小等属性来定义每个面的样式
- 每个面使用绝对定位，并通过不同的
transform属性来确定其在 3D 空间中的位置。 - 也可以添加响应式布局，在不同页面展示效果更好