页面样式
创建四个具有不同位置和视角的正方体，通过 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>
你学会了吗！
本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！
转载请注明出处： 免费源码网-免费的源码资源网站 » css 3D效果实现六面体（易）
发表评论 取消回复