透视html

最新推荐文章于 2025-08-02 17:52:25 发布

2502_90861279

最新推荐文章于 2025-08-02 17:52:25 发布

阅读量140

点赞数 1

CC 4.0 BY-SA版权

文章标签： css css3 前端

本文链接：https://blog.youkuaiyun.com/2502_90861279/article/details/148610282

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>透视</title>
		<style>
			body{
				/* 透视:值越大，表示视距越远，则成像越小。反之 */
				perspective: 500px;
				/* 透视点 */
				perspective-origin: center top;
			}
			div{
				width: 350px;
				height: 400px;
			}
			.box1{
				border: 1px solid red;
				margin: 200px auto;
				/* 开启3D空间效果 */
				transform-style: preserve-3d;
			}
			.box2{
				border: 1px dashed black;
				transition: all 1s linear;
				/* 元素转换的轴线 */
				transform-origin: center top;
			}
			/* 鼠标悬停 */
			.box1:hover .box2{
				/* transform: rotateX(45deg); */
				/* transform: translate3d(100,200,-300px); */
				/* transform: scale3d(2); */
				transform: rotate3d(1,0,0,45deg);
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="box2"></div>
		</div>
	</body>
</html>