0066 3D Conversion: translate3d (x, y, z)

First, know 3Dthe conversion

1. 3D specialty
   • Near the far smaller
   • Behind the object invisible occlusion
2. Three-dimensional coordinate system

   • x-axis: the right level - Note: The x-axis on the right is positive, left is negative

   • y axis: vertical downward - Note: Here the y-axis is a positive value, a negative value is above

   • z-axis: vertical screen - Note: towards the outside is positive, a negative value is entered,

Second, the 3Dconversion

1. 3D The Knowledge Points

   • 3DDisplacement: translate3d(x, y, z)[translate3d: d lowercase. ]
   • 3D Rotation:rotate3d(x, y, z)
   • perspective:perspctive
   • 3DAppear transfrom-style

2. 3D mobile translate3d

   • 3DThat is moved 2Dbased on the movement, the direction of a movable pay more, that is, the z-axis direction,
   • transform: translateX(100px): Moving the x-axis only
   • transform: translateY(100px): Move only in the y-axis
   • transform: translateZ(100px): Move only in the z-axis
   • transform: translate3d(x, y, z): Wherein the distance direction x, y, z axes, respectively, simply more mobile
   • Note: x, y, z corresponding to the value can not be omitted, if not filled, it is filled with 0

3. grammar

    transform: translate3d(x, y, z)

4. Code demonstrates

   transform: translate3d(100px, 100px, 100px)
   /* 注意：x, y, z 对应的值不能省略，不需要填写用 0 进行填充 */
   transform: translate3d(100px, 100px, 0)