HTML CSS 静态倾斜立体正方形 - 完整代码可复制 - 常规

<!DOCTYPE html>
<html>
<head>
	<title>静态倾斜立体正方形</title>
	<style>
		.container {
			position: relative;
			margin: 100px auto;
			width: 200px;
			height: 200px;
			transform-style: preserve-3d;
			transform: rotateX(45deg) rotateY(45deg);
		}
		.front, .back, .left, .right, .top {
			position: absolute;
			width: 200px;
			height: 200px;
			background: #ccc;
			border: 1px solid #000;
			box-shadow: 0 0 10px rgba(0,0,0,.5);
			transform-origin: center center;
			transform-style: preserve-3d;
		}
		.front {
			transform: translateZ(100px);
		}
		.back {
			transform: rotateY(180deg) translateZ(100px);
		}
		.left {
			transform: rotateY(-90deg) translateZ(100px);
		}
		.right {
			transform: rotateY(90deg) translateZ(100px);
		}
		.top {
			transform: rotateX(-90deg) translateZ(100px);
		}
	</style>
</head>
<body>
	<div class='container'>
		<div class='front'></div>
		<div class='back'></div>
		<div class='left'></div>
		<div class='right'></div>
		<div class='top'></div>
	</div>
</body>
</html>