思路

六边形想要在平面上展示必然会涉及到 X，Y，Z 轴开启一个3d的空间 css有这样一个属性：

transform-style：他有两个属性值

分别是preserve-3d; 和flat

flat：表示所有子元素在2D平面呈现。 preserve-3d：表示所有子元素在3D空间中呈现。

我们选择preserve-3d属性

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<style>
		.wrapper{
		width: 50%;
		float: left;
		}
		.cube{
		font-size: 4em;
		width: 2em;
		margin: 1.5em auto;
		transform-style:preserve-3d;
		transform:rotateX(-35deg) rotateY(30deg);
		}
		.side{
		position: absolute;
		width: 2em;
		height: 2em;
		background: rgba(255,99,71,0.6);
		border: 1px solid rgba(0,0,0,0.5);
		color: white;
		text-align: center;
		line-height: 2em;
		}
		.front{
		transform:translateZ(1em);
		}
		.bottom{
		transform:rotateX(-90deg) translateZ(1em);
		}
		.top{
		transform:rotateX(90deg) translateZ(1em);
		}
		.left{
		transform:rotateY(-90deg) translateZ(1em);
		}
		.right{
		transform:rotateY(90deg) translateZ(1em);
		}
		.back{
		transform:translateZ(-1em);
		}
		</style>
		</head>
		<div class="wrapper w1">
		<div class="cube">
		<div class="side front">1</div>
		<div class="side back">6</div>
		<div class="side right">4</div>
		<div class="side left">3</div>
		<div class="side top">5</div>
		<div class="side bottom">2</div>
		</div>
		
		</body>
		</html>
	</body>
</html>

解释

transform:rotateX(-35deg) rotateY(30deg); 这个表示在x轴和y轴进行旋转实现3d效果

当transform:rotateX(0) rotateY(0);的值为0deg 0deg 的时候

如图

transform:rotateX(-90deg) translateZ(1em); 定义了元素旋转的角度

其中translateZ(1em) z轴旋转尺寸其数值越大离用户就越近数值越小离用户越远

示例：比如我们给 1 这个div 增家translateZ()数值为 .front{ transform:translateZ(3em) ; }

示例：比如我们给 1 这个div 缩小translateZ()的数值为 .front{ transform:translateZ(0em) ; }

总结

首先要开启3D模式 transform-style:preserve-3d;

要在父盒子进行旋转transform:rotateX(-35deg) rotateY(30deg); 看到3d 的效果

其次就是设置每个div 在x y 轴的旋转角度以及z轴的位置

css 实现正方体

思路

完整代码

解释

总结