前端demo——利用CSS3简单实现一个3D立方体（两种方式）-CSDN博客

本文链接：https://blog.csdn.net/qq_39347364/article/details/104959485

本文详细介绍了使用CSS3实现3D立方体布局的两种方法。第一种是通过先旋转元素再进行位移，保持旋转基线不变；第二种是改变旋转基线后再旋转，通过调整transform-origin属性来达到目的。每种方法都提供了详细的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

写好html布局：

<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>

第一种方式：
先旋转后位移（旋转基线不变）

css3代码：

			* {
				margin: 0;
				padding: 0;
			}

			body {
				/*搭建3D环境*/
				transform-style: preserve-3d;
				/*景深 近大远小*/
				perspective: 900px;
			}

			.box {
				width: 200px;
				height: 200px;
				/*background: rgba(0,0,0,0.2);*/
				margin: 300px auto;
				position: relative;
				/*搭建3D环境*/
				transform-style: preserve-3d;
				/*景深 近大远小*/
			}

			.box div {
				width: 200px;
				height: 200px;
				font-size: 40px;
				font-weight: bold;
				line-height: 200px;
				text-align: center;
				color: red;
				position: absolute;
			}

			.box1 {
				background: rgba(255, 100, 100, 0.5);
				/*上面*/
				transform: translateY(-100px) rotateX(90deg);
			}

			.box2 {
				background: rgba(255, 200, 100, 0.5);
				/*右面*/
				transform: translateX(100px) rotateY(90deg);
			}

			.box3 {
				background: rgba(25, 100, 200, 0.5);
				/*下面*/
				transform: translateY(100px) rotateX(-90deg);
			}

			.box4 {
				background: rgba(200, 200, 200, 0.5);
				/*后面*/
				transform: translateZ(-100px) rotateY(180deg);
			}

			.box5 {
				background: rgba(25, 10, 10, 0.5);
				/*前面*/
				transform: translateZ(100px);
			}

			.box6 {
				background: rgba(25, 200, 10, 0.5);
				/*左边*/
				transform: translateX(-100px) rotateY(-90deg);
			}

效果:
在这里插入图片描述

第二种方式：
改变旋转基线再旋转

			* {
				margin: 0;
				padding: 0;
			}

			body {
				/*搭建3D环境*/
				transform-style: preserve-3d;
				/*景深 近大远小*/
				perspective: 900px;
			}

			.box {
				width: 200px;
				height: 200px;
				background: rgba(0, 0, 0, 0.5);
				margin: 300px auto;
				position: relative;
				/*搭建3D环境*/
				transform-style: preserve-3d;
			}
			
			.box div {
				width: 200px;
				height: 200px;
				font-size: 40px;
				color: #f00;
				line-height: 200px;
				text-align: center;
				position: absolute;

			}

			.box1 {
				background: rgba(0, 200, 100, 0.8);
				/*右面*/
				/*旋转基线*/
				transform-origin: right center;
				transform: rotateY(90deg);
			}

			.box2 {
				background: rgba(110, 200, 100, 0.8);
				/*上面*/
				/*旋转基线*/
				transform-origin: center top;
				transform: rotateX(90deg);
				transition: 1s;

			}

			.box3 {
				background: rgba(200, 200, 100, 0.8);
				/*下面*/
				/*旋转基线*/
				transform-origin: center bottom;
				transform: rotateX(-90deg);
			}

			.box4 {
				background: rgba(10, 200, 0, 0.8);
				/*前面*/
				transform: translateZ(200px);
				/*位移*/
			}

			.box5 {
				background: rgba(0, 20, 200, 0.8);
				/*左面*/
				/*旋转基线*/
				transform-origin: left center;
				transform: rotateY(-90deg);
			}

			.box6 {
				background: rgba(100, 200, 100, 0.8);
				transform: rotateY(180deg);

			}