Example of implementing translation effect (transfrom: translate) with CSS3

We use the translate parameter to achieve movement

translateX: Translate along the X axis. Fill in a positive number to translate to the right, and a negative number to translate to the left.

translateY : translate along the Y axis, fill in a positive number to translate downward, fill in a negative number to translate upward

translateZ: The larger the value, the closer the image you see is to you. The smaller the value, the farther the image you see is from you.

translate sets translateX and translateY at the same time

translate(translateX, translateY)

The first parameter is the translation along the X axis. Fill in a positive number to translate to the right, fill in a negative number to translate to the left. The second parameter is the translation along the Y axis. Fill in a positive number to translate downward, fill in a negative number to translate upward.

translate3d sets translateX, translateY and translateZ at the same time, so you can fill in three parameters
translate3d()

transform: translate3d(0,-50%,-50px)

The first parameter is the translation along the X axis. Fill in a positive number to translate to the right, and fill in a negative number to translate to the left. The second parameter is the translation along the Y axis. Fill in a positive number to translate downward, and fill in a negative number to translate upward. The third parameter is the translation along the Z axis. The larger the value, the closer the image you see is to you. The smaller the value, the farther the image you see is from you.

This is the end of this article about examples of how to achieve translation effect (transfrom: translate) with CSS3. For more information about CSS3 translation transfrom: translate, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. We hope that you will support 123WORDPRESS.COM in the future!