3D 盒子源码

最新推荐文章于 2024-01-29 05:00:00 发布

高辉

最新推荐文章于 2024-01-29 05:00:00 发布

阅读量479

点赞数 1

分类专栏：前端文章标签： 3D 3D盒子

本文链接：https://blog.csdn.net/ZJX103RLF/article/details/79409775

版权

2 篇文章 0 订阅

订阅专栏

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="{CHARSET}">
	<title></title>
	<meta charset="utf-8" />
	<style>
	*{
	margin: 0;
	padding: 0;
	}
	body{
	perspective: 800px;
	}
	.a{
	width: 150px;
	height: 200px;
	margin: 200px auto;
	position: relative;
	transform-style: preserve-3d;
	/border: 1px solid #000;/
	transform: translateZ(-100px);
	}
	.a:hover{
	transform:rotateX(180deg)translateZ(100px);
	transition: 1s;
	}
	.a p{
	width: 150px;
	height: 200px;
	border: 1px solid #000;
	position: absolute;
	top: 0;
	left: 0;
	}
	.a .left{
	width: 200px;
	transform-origin: right;
	transform: translateZ(100px) translateX(-200px) rotateY(-90deg);

	}
	.a .before{
	transform: translateZ(100px);
	}

	.a .right{
	width: 200px;
	transform-origin: left;
	transform: translateZ(100px) translateX(150px) rotateY(90deg);
	}
	.a .top{
	transform-origin:bottom ;
	transform: translateZ(100px) translateY(-200px) rotateX(90deg);
	}
	.a .buttom{
	transform-origin: top;
	transform: translateZ(100px) translateY(200px) rotateX(-90deg);
	}
	.a .behind{
	transform: translateZ(-100px);
	}
	</style>
	</head>
	<body>
	<div class="a">
	<p class="before">q</p>
	<p class="behind">h</p>
	<p class="left">z</p>
	<p class="right">y</p>
	<p class="top">s</p>
	<p class="buttom">x</p>
	</div>
	</body>
	</html>