CSS 实现3D立方体

weixin_45253306

已于 2022-08-22 15:01:33 修改

阅读量890

点赞数 3

CC 4.0 BY-SA版权

分类专栏：立方体文章标签： css html

于 2020-02-23 15:14:23 首次发布

本文链接：https://blog.csdn.net/weixin_45253306/article/details/104445927

立方体专栏收录该内容

1 篇文章

订阅专栏

CSS 实现3D立方体

3D空间坐标系

要想做出3D效果，首先我们要对3D的空间坐标系有一个了解，假设在网页中的一个有宽高的div，它的中心点就是坐标原点。

X轴的正方向是从原点指向右，Y轴的正方向是从原点指向下，Z轴正的方向是从原点指向屏幕外。

CSS transform(变形)

transform属性

位移：
transform:translateX(px);
transform:translateY(px);
transform:translateZ(px);
旋转：
rotateX()
rotateY()
rotateZ()
缩放与斜切（这里就不介绍了）

从2D到3D无非是元素的旋转与位移，要想实现一个立方体，我们首先要有六个面。

		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
		</ul>

CSS添加样式

		li{
				width: 300px;
				height: 300px;
				border: 1px solid yellow;
				color: white;
				list-style: none;
				/*定位在一起，即叠加在一起*/
				position: absolute;
				/*圆角*/
				border-radius:20% ;
				/*透明度*/
				opacity: 0.7;
				/*阴影*/
				box-shadow: 0px 0px 100px white;
			}

这六个面一开始都是在2D平面内，我们让两个面沿着Z轴进行位移，就有了正面与背面，这也是最简单的两个面。


			/*正面：红色*/
			li:nth-child(1){
				background: red;
				/*位移*/
				transform: translateZ(150px);
			}
			
			/*后面：无法描述的颜色*/
	       li:nth-child(6){
	       	background: palevioletred;
	       	transform: translateZ(-150px);
	       }

左右和上下这四个面就有点麻烦了，主要是因为这四个面既需要位移还要旋转，但是旋转会使面的坐标系方向也跟着旋转。

			/*左边：黄色*/
			li:nth-child(2){
				background: yellow;
				transform: rotateY(-90deg) translateZ(150px) ;
			}
			/*右边：蓝色*/
			li:nth-child(3){
				background: deepskyblue;
				transform: rotateY(90deg) translateZ(150px);
			}
			/*上边：绿色*/
			li:nth-child(4){
				background: greenyellow;
				transform: rotateX(90deg) translateZ(150px);
			}
			/*下边：橙红色*/
	        li:nth-child(5){
	        	background: orangered;
	        	transform: rotateX(-90deg) translateZ(150px);
	        }

视角和3D容器

perspective（景深）：离屏幕多远的距离去观察元素，值越大幅度越小（近大远小）。

transform-style：preserver-3D产生一个3d空间。

我们现在只需要将上面的六个面放到一个3D容器中就能出现3D效果，当然我们只能看到正面，要想看到全部的面，就需要让这个容器沿着对角线进行旋转，这里我选择添加一个旋转的动画效果。

			/*父容器添加3D空间*/
			ul{
				width: 300px;
				height: 300px;
				position: relative;
				/*居中*/
				margin:150px auto;
				/*定义3D空间*/
				transform-style: preserve-3d;
				/* 添加旋转动画 */
				animation: box 20s linear infinite;
			}
			/*关键帧 */
			@keyframes box{
				from{
					transform: rotate3d(0,0,0,0deg);
				}
				to{
					transform: rotate3d(1,1,1,360deg);
				}
			}

最后

完成以上工作后我们就会得到一个旋转的立方体

在这里插入图片描述
下面附上完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>3D</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body{
				background: black;
				overflow: hidden;
			}
			/*父容器添加3D空间*/
			ul{
				width: 300px;
				height: 300px;
				/*border: white 1px solid;*/
				position: relative;
				margin:150px auto;
				/*定义3D空间*/
				transform-style: preserve-3d;
				/* 添加旋转动画 */
				animation: box 20s linear infinite;
			}
			/*关键帧 */
			@keyframes box{
				from{
					transform: rotate3d(0,0,0,0deg);
				}
				to{
					transform: rotate3d(1,1,1,360deg);
				}
			}
			li{
				width: 300px;
				height: 300px;
				border: 1px solid yellow;
				color: white;
				list-style: none;
				/*拼接*/
				position: absolute;
				/*圆角*/
				border-radius:20% ;
				opacity: 0.7;
				/*阴影*/
				box-shadow: 0px 0px 100px white;
			}
			/*正面：红色*/
			li:nth-child(1){
				background: red;
				/*位移*/
				transform: translateZ(150px);
			}
			/*左边：黄色*/
			li:nth-child(2){
				background: yellow;
				transform: rotateY(-90deg) translateZ(150px) ;
			}
			/*右边：蓝色*/
			li:nth-child(3){
				background: deepskyblue;
				transform: rotateY(90deg) translateZ(150px);
			}
			/*上边：绿色*/
			li:nth-child(4){
				background: greenyellow;
				transform: rotateX(90deg) translateZ(150px);
			}
			/*下边*/
	        li:nth-child(5){
	        	background: orangered;
	        	transform: rotateX(-90deg) translateZ(150px);
	        }
	        /*后面*/
	       li:nth-child(6){
	       	background: palevioletred;
	       	transform: translateZ(-150px);
	       }
		</style>
	</head>
	<body>
		<!--思路：
			在容器中创建3D空间，把原本2d的块来进行
			相应的旋转和位移，拼接成一个正方体。
		-->
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		
	</body>
</html>