master

分支 (1)

管理

管理

master

web_practice
/
立方体.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box{
			width: 300px;
			height: 300px;
			margin: 100px auto;
			position: relative;
			transform-style: preserve-3d;
			/*perspective: 500px;*/
			transform: rotate3d(1,1,0,-30deg);

		}
		.box>div{
			width: 300px;
			height: 300px;
			position: absolute;
			opacity: 0.5;
		}
		.front{
			background-color: red;
			transform: translateZ(150px);
		}
		.back{
			background-color: orange;
			transform: translateZ(-150px);
		}
		.left{
			background-color: yellow;
			transform: translateX(-150px) rotateY(90deg);
		}
		.right{
			background-color: green;
			transform: translateX(150px) rotateY(90deg);
		}
		.top{
			background-color: blue;
			transform: translateY(-150px) rotateX(90deg);
		}
		.bottom{
			background-color: purple;
			transform: translateY(150px) rotateX(90deg);
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="front">front</div>
		<div class="back">back</div>
		<div class="left">left</div>
		<div class="right">right</div>
		<div class="top">top</div>
		<div class="bottom">bottom</div>
	</div>
</body>
</html>