How to use translate function in css

This article is about how to use the translate function in css. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

1. Translate allows translation transformations to be declared separately, independent of the transform attribute.

2. This works better on some typical user interfaces, and it eliminates the need to declare the function in transform and remember the exact order of the conversion functions.

Example

.wrapper {width: 200px; height: 200px; border: 2px dotted red; margin: 20px auto;}. Wrapper div {width: 200px; height: 200px; line-height: 200px; text-align: center; background: orange; color: # fff;-webkit-transform: translate (50px Magneto 100px);-moz-transform:translate (50pxMagne100px); transform:translate (50pxMagint 100px);} Thank you for reading! This is the end of the article on "how to use the translate function in css". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!