<div class="father">
<div class="son"></div>
</div>
<style>
*{
margin: 0;
padding: 0;
}
.father{
width: 200px;
height: 200px;
background-color: red;
border: 1px solid #000;
margin: 100px auto;
perspective: 500px;//perspective 属性定义 3D 元素距视图的距离,以像素计
/*
1.什么是2D和3D
2D就是一个平面, 只有宽度和高度, 没有厚度
3D就是一个立体, 有宽度和高度, 还有厚度
默认情况下所有的元素都是呈2D展现的
2.如何让某个元素呈3D展现
和透视一样, 想看到某个元素的3d效果, 只需要给他的父元素添加一个transform-style属性, 然后设置为preserve-3d即可
*/
transform-style: preserve-3d;//增加一个3d效果
transform: rotateY(0deg);
}
.son{
width: 100px;
height: 100px;
background-color: blue;
border: 1px solid #000;
margin: 0 auto;
margin-top: 50px;
transform: rotateY(45deg);
}
</style>
效果:(改变father中的度数transform: rotateY(0deg); 手动F12从0度到360度展示效果)