CSS3 3D Conversion Translate3d (x, y, z) function

CSS3 3D Conversion translate3d (x, y, z) function:
Translate3d (x, Y, z) is just a form of a 3D conversion, and more relevant content can be found inCSS3 3D Conversion effect Detailed introductiona chapter.
This function is used to specify the displacement of the specified element in three-dimensional space.
syntax structure:

Translate3d (x, Y, z)

parameter resolution:
1.x: Represents the displacement in the x-axis direction.
2.y: Represents the displacement in the y-axis direction.
3.z: Represents the displacement in the z-axis direction.
code Example:
1.x displacement in axis direction:

<! doctype html>   
    Drag button to achieve the x-axis direction of displacement of the demonstration, everything is clear.  
 2.y displacement in axis direction:  
 
<! doctype html>   
    Drag the button to achieve the y-axis direction displacement of the demonstration, everything is clear.  
 3.z axis Direction Displacement:  
 
<! doctype html>   
    CSS3 's perspective properties are detailed in   one chapter.    
 translate3d () function can also be split to write separately:  
 
Transform:translatex (10px); Transform:translatey (20px); Transform:translatez (30px);
 
There is not much to introduce, very simple, a look at the understanding.
 
The original address is: CSS3 's 3D conversion translate3d (x, y, z) function section.
CSS3 3D Conversion Translate3d (x, y, z) function