创建3d空间

最新推荐文章于 2023-11-21 11:27:20 发布

网络喷子在线厮杀

最新推荐文章于 2023-11-21 11:27:20 发布

阅读量244

点赞数

文章标签： 3d css html

本文链接：https://blog.csdn.net/m0_65480869/article/details/126347805

版权

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
	.wrap {
	width: 150px;
	height: 300px;
	background-color: pink;

	margin: 50px auto;


	transform: rotateY(75deg);

	/* 创建网页3d效果当子元素和父元素都有3d变化的时候，给父元素设置 transform-style: preserve-3d;属性 */
	transform-style: preserve-3d;


	/* preserve-3d，如果搭配overflow: hidden/scroll/auto使用，相当于2D效果 */
	/* overflow: hidden;
	overflow: scroll;
	overflow: auto; */

	}

	.wrap .box {
	width: 100px;
	height: 200px;
	background-color: tomato;
	margin: 0 auto;

	transform: rotateX(75deg);

	}
	</style>
	</head>

	<body>
	<div class="wrap">
	<div class="box"></div>
	</div>
	</body>

	</html>