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

写好html布局：

<div class="box">
	<div class="box1">1div>
	<div class="box2">2div>
	<div class="box3">3div>
	<div class="box4">4div>
	<div class="box5">5div>
	<div class="box6">6div>
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);

			}

效果: