页面样式
创建四个具有不同位置和视角的正方体，通过 CSS 的 3D 变换实现了立体感的效果。每个正方体的六个面可以通过不同的数字和颜色进行区分，增加了可视化的效果。
结构分析
<body>部分包含了四个<div>元素，分别是box1、box2、box3和box4。每个<div>内部又包含了六个子<div>元素，分别对应正方体的六个面，每个面上有数字、样式和绝对定位。
CSS 样式
- 首先，使用通配符选择器
*重置了所有元素的边距和内边距为 0，确保页面没有默认的空白边距。 - 对于四个正方体容器（
.box1、.box2、.box3、.box4）：- 设置了固定定位，使它们在浏览器窗口中的位置固定。每个容器都有特定的宽度（200px）和高度（200px）。
- 通过设置不同的
top和left属性，将四个正方体放置在不同的位置。例如，box1位于top:50px;left: 100px，box2位于top:50px;left:500px等。 margin: auto用于使容器在水平和垂直方向上自动居中，但由于同时设置了固定定位，这个属性在这里主要起到辅助调整位置的作用。transform-style: preserve-3d创建了一个 3D 空间，允许子元素在三维空间中进行变换。transition: 2s设置了过渡效果，使得正方体在进行交互或状态变化时，过渡时间为 2 秒，增加了动画的平滑性。perspective-origin和perspective属性用于设置 3D 视角的原点和距离。不同的正方体容器设置了不同的perspective-origin值，以调整观察正方体的视角原点。perspective: 1000px设置了观察 3D 场景的距离，影响正方体的透视效果。
- 对于正方体的六个面（
.box div）：- 设置了绝对定位，使它们相对于父容器进行定位。宽度和高度都为 200px，与父容器相同。
text-align: center和line-height:200px用于使面上的数字居中显示。字体大小为 150px，字体加粗。颜色设置为白色（aliceblue）。border:2px solid #000为每个面添加了 2 像素宽的黑色边框。
- 对于具体的六个面（
.c1到.c6）：- 通过不同的背景颜色进行区分，如
.c1的背景颜色为rgba(235, 69, 9, 0.3)。 - 使用
transform属性进行不同方向的平移和旋转，以形成正方体的各个面。例如，.c1通过transform:translateZ(100px)将第一个面向前平移 100px；.c2通过transform:translateZ(-100px) rotateY(180deg)将第二个面向后平移 100px 并绕 Y 轴旋转 180 度，使正面朝外。
- 通过不同的背景颜色进行区分，如
整体代码
<!-- 先在一个盒子里面设置6个面，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>正方体</title><style>*{margin:0;padding:0;}.box1{width:200px;height:200px;position:fixed;top:50px;left: 100px;/* 固定定位在浏览器里 */margin: auto;transform-style: preserve-3d; /* //形成3d空间）*/transition:2s; /* //为了过度看起来更舒服 */perspective-origin:150% 50%;perspective: 1000px;}.box2{width:600px;height:200px;position:fixed;top:50px;left:500px;margin: auto;transform-style: preserve-3d; perspective-origin:200% 200%;perspective: 1000px;}.box3{width:200px;height:200px;position:fixed;top:400px;left: 100px;margin: auto;transform-style: preserve-3d; perspective-origin:center;perspective: 1000px;}.box4{width:200px;height:200px;position:fixed;top:400px;left: 500px;margin: auto;transform-style: preserve-3d; perspective-origin:-200%;perspective: 1000px;}.box div{width:200px;height:200px;text-align: center;line-height:200px;font-size: 150px;font-weight:bolder;color:aliceblue;position:absolute; /* 让6个面全部绝对定位在父元素里面 */left:0;top:0;border:2px solid #000;}.c1{/* 第一个面往前走 */background:rgba(235, 69, 9, 0.3);transform:translateZ(100px);}.c2{/* 第二个面往后走 */background:rgba(132, 235, 58, 0.3);transform:translateZ(-100px) rotateY(180deg); /*rotateY(180deg) 让正面朝外*/}.c5{background:rgba(32, 156, 222, 0.29);transform:translateY(-100px) rotateX(90deg);}.c6{background:rgba(229, 233, 9, 0.291);transform:translateY(100px) rotateX(-90deg);}.c3{background:rgba(193, 8, 165, 0.35);transform:translateX(-100px) rotateY(-90deg);}.c4{background:rgba(96, 9, 111, 0.213);transform:translateX(100px) rotateY(90deg);}</style>
</head>
<body><div class="box1 box">150% 50%;<div class="c1">1</div><div class="c2">2</div><div class="c3">3</div><div class="c4">4</div><div class="c5">5</div><div class="c6">6</div></div><div class="box2 box">200% 200%<div class="c1">1</div><div class="c2">2</div><div class="c3">3</div><div class="c4">4</div><div class="c5">5</div><div class="c6">6</div></div><div class="box3 box">center<div class="c1">1</div><div class="c2">2</div><div class="c3">3</div><div class="c4">4</div><div class="c5">5</div><div class="c6">6</div></div><div class="box4 box">-200%<div class="c1">1</div><div class="c2">2</div><div class="c3">3</div><div class="c4">4</div><div class="c5">5</div><div class="c6">6</div></div>
</body>
</html>
你学会了吗！