translate is a new css attribute of css3; the translate attribute is used to define the 2d translation transformation of the element. This attribute is often used in conjunction with the transform attribute. The transform attribute can apply 2d or 3d transformation to the element. The syntax is " transform:translate(x-axis translation distance, y-axis translation distance)".

The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.

translate is a css3 property

The transform property applies a 2D or 3D transformation to an element. This property allows us to rotate, scale, move or tilt the element.

translate(x,y) Define 2D transformation.

The syntax is as follows:

transform:translate([, ]);

The translate() function can move elements.

Value:

translate( [, ]); means moving the element on the X-axis and Y-axis simultaneously, represents the displacement amount. Contains two parameters. If the second parameter is omitted, the second parameter is 0; if the parameter is negative, it means moving in the opposite direction.

translateX( ); means moving the element only in the X-axis (horizontal direction).

translateY( ); means moving the element only in the Y axis (vertical direction).

translateZ( ); means moving the element only on the Z axis, provided that the element itself or the element's parent element has a perspective value set.

The example is as follows:

    
  
translate() 方法
 
translate() 方法从元素当前位置对其进行移动：
 
 该 div 元素从其当前位置向右移动 50 个像素，并向下移动 100 个像素。 
  

Output result:

css video tutorial,html video tutorial)

The above is the detailed content of Is translate a css3 property?. For more information, please follow other related articles on the PHP Chinese website!