3D怎么写才能显示出效果呢。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		*{padding: 0;margin:0;}
		.father
		{
			width: 200px;
			height: 200px;
			background-color: white;
			border: 1px solid black;
			margin: 100px auto;
			 /*
            1.什么是2D和3D
            2D就是一个平面, 只有宽度和高度, 没有厚度
            3D就是一个立体, 有宽度和高度, 还有厚度
            默认情况下所有的元素都是呈2D展现的
            2.如何让某个元素呈3D展现
            和透视一样, 想看到某个元素的3d效果, 只需要给他的父元素添加一个transform-style属性, 然后设置为preserve-3d即可
            */
           transform-style: preserve-3d;
		}
		.son
		{
			width: 100px;
			height: 100px;
			background-color: yellow;
			border: 1px solid green;
			margin: 0px auto;
			margin-top: 50px;
			transform: rotateX(100deg);
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="son"></div>
	</div>
</body>
</html>
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页