CSS3 3D转换模块

<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度展示效果）