How to make the image move to the left with css

In CSS, you can use the "transform:translateX(px)" style to move the image to the left. The transform attribute allows us to rotate, scale, move or tilt the element, and set the value to "translateX( px)" to perform translation.

The operating environment of this tutorial: Windows7 system, HTML5&&CSS3 version. This method is suitable for all brands of computers.

Recommended: "css Video Tutorial"

css3 is very powerful, and you can achieve very good mobile effects with just a few lines of code (not considered a dynamic page) .

css moves the image to the left

The page structure is essential. Here is the nested structure. The img tag is the key to us introducing the image (but it does not It is not the key to affecting the effect, just for beautification), everyone must pay attention to the path, so that it can be introduced correctly; the key point is to structure the stage div (stage) and the container div (container); Figure 2 is to control the size of the picture to make it more comfortable to see;

Then there is the style. The following picture is the basic style selection of the stage when building a 3D effect (the editor uses this as a basis to make the 3D effect. If it is just for The 2D displacement code can be ignored. Of course, the stage div does not need to be written) perspective controls the viewing distance; perspective-origin controls the perspective (both involve 3D)

container div is the key to controlling 2D displacement. The key attribute is transform. This attribute transform:translate(px, px); This is the attribute that controls displacement in a 2D scene;

Here transfo-style: preserver-3d; you can The div becomes 3D, which can naturally achieve 2D effects; transition is to control the transition to achieve dynamic picture effects;

The following is to control the dynamic effect. Move the mouse up to move the picture. (: hover pseudo-class selector matches the transition attribute above); transform: translateX (150px), this is to control the image to move in the positive direction of the X-axis; note that X is capitalized;

The above is the detailed content of How to make the image move to the left with css. For more information, please follow other related articles on the PHP Chinese website!