image.png
    image.png

    3D移动（translate3d）
    image.png

    1. <style>
    2.     body{
    3.         /* 透视写到被观察元素的父盒子上面
    4.         透视像素越小，盒子越大 */
    5.         perspective: 200px;
    6.     }
    7.     div{
    8.         width: 200px;
    9.         height: 200px;
    10.         background-color: green;
    11.         transform: translateX(100px);
    12.         /* transform: translateY(100px); */
    13.         /* transform: translateZ(100px); */
    14.         /* transform: translateX(100px) translateY(100px) translateZ(100px); */
    15.         /* xyz不能省略，如果没有就写0 */
    16.         transform: translate3d(400px,100px,100px);
    17.     }
    18. </style>
    19. <body>
    20.     <div></div>
    21. </body>

    image.png
    加了透视过后：
    image.png