3D立方体

最新推荐文章于 2022-11-21 10:45:00 发布

置顶我就是咸鱼

最新推荐文章于 2022-11-21 10:45:00 发布

阅读量163

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/weixin_44808327/article/details/111060579

版权

js 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>3D</title>
	<style type="text/css">
		.wp{
			width: 200px;
			height: 200px;
			position: absolute;
			margin: auto;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			/*申明3D*/
			transform-style:preserve-3d; 
			transform: rotateX(-10deg) rotateY(-15deg);
		}
		.wp div{
			width: 200px;
			height: 200px;
			text-align: center;
			font-size: 2.5em;
			line-height: 200px;
			position: absolute;
			top: 0;
			left: 0;
		}
		.wp div:nth-child(1){
			background: rgba(255,0,0,0.5);
			transform: rotateX(90deg) translateZ(100px) ;
		}
		.wp div:nth-child(2){
			background: rgba(0,255,0,0.5);
			transform: rotateY(-90deg) translateZ(100px);
		}
		.wp div:nth-child(3){
			background: rgba(255,0,255,0.5);
			transform: rotateY(90deg) translateZ(100px);
		}
		.wp div:nth-child(4){
			background: rgba(0,255,255,0.5);
			transform: rotateX(-90deg) translateZ(100px);
		}
		.wp div:nth-child(5){
			background: rgba(255,255,0,0.5);
			transform:translateZ(100px);
		}
		.wp div:nth-child(6){
			background: rgba(255,0,100,0.5);
			transform:rotateY(180deg) translateZ(100px);
		}
	</style>
</head>
<body>
	<div class="wp">
		<div>top</div>
		<div>left</div>
		<div>right</div>
		<div>btm</div>
		<div>face</div>
		<div>back</div>
	</div>
</body>
</html>