How to set image translation in css

How to set image translation in css: 1. Use the "translate(x,y)" attribute to move the element in the x-axis and y-axis directions at the same time; 2. Use the "translate X(x)" attribute to make the element move Only move in the x-axis direction; 3. Use the "translateY(y)" attribute to make the element only move in the y-axis direction.

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

Recommended:css video tutorial

The definition of translation: the element moves in a straight line from its original position.

In CSS, you can use the Transform attribute for the img image element to set the image translation.

TheTransform property applies a 2D or 3D transformation to the element. This property allows you to rotate, scale, move, tilt, etc. the element.

There are three cases of translation:

translate (x, y) moves in the x-axis and y-axis directions simultaneously

translate X (x) only moves in the x-axis direction

translateY(y) only moves in the y-axis direction

Example:

      
   
 
 
 
 
translate(45px) 
 
 
 
 
 
 
translateX(45px)
 
 
 
 
 
 
translateY(45px)
 
  

Rendering:

More For programming related knowledge, please visit:Programming Teaching! !

The above is the detailed content of How to set image translation in css. For more information, please follow other related articles on the PHP Chinese website!