2D/3D的变化与转换

2D：

.box {
    width: 100px;
    height: 100px;
    background: #aaa;
    /*位移：transform: translate(水平位移值,垂直位移值)*/
    transform: translate(45px,45px);

    /*旋转：transform: rotate(正值为顺时针,负值为逆时针);*/
    transform: rotate(-90deg);

    /*缩放：transform: scale(水平缩放值，垂直缩放值);*/
    transform: scale(2,1.5);
}

3D：

！！！注意：
 transform-style: preserve-3d;
 /*flat表示默认值，所有子元素在2D平面呈现；
   preserve-3d;表示所有子元素在3D空间中呈现；*/
 perspective:500px;
 /*要给予其父元素添加*/
 /*perspective为距用户的视距，一般为500px*/

.box {
    width: 100px;
    height: 100px;
    background: #aaa;
    /*位移：transform: translate3d(水平位移值,垂直位移值,用户距离显示屏的距离)*/
    transform: translate3d(45px,45px,100px);

    /*!*旋转：transform: rotate3d(x,y,z,角度值);*!*/
    transform: rotate3d(3,1,2,60deg);
    /*角度值被x,y,z所分割  x为30deg,y为10deg,z为20deg*/

    /*!*缩放：transform: scale3d(水平缩放值，垂直缩放值，z轴缩放值);*!*/
    transform: scale3d(2,1.5,1);

}