用html css 做一个静态倾斜立体正方形 左 右 上三面 完整代码可复制到vscode直接使用

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

用html css 做一个静态倾斜立体正方形 左 右 上三面 完整代码可复制到vscode直接使用

用html css 做一个静态倾斜立体正方形左右上三面完整代码可复制到vscode直接使用