How to use skew function in css

This article mainly shows you "how to use the skew function in css", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to use the skew function in css" this article.

1. The skew function defines the tilt transformation of elements on a two-dimensional plane. This transformation is a shear mapping (crosscutting) that distorts each point within the cell horizontally and vertically at a certain angle.

The coordinates of each point are adjusted proportionally according to the specified angle and the distance from the origin. Therefore, the farther a point is from the origin, the greater its increment.

2. Specify one or two parameters that represent the amount of slope applied in each direction.

Example

Tilt explanation * {margin: 0; padding: 0;} div {width: 300px; height: 300px; background-color: red; margin: 50px auto; font-size: 50px; color: white; / * transition: all 1s * /} div:hover {/ * 2d x axis facing down, y axis facing right, that is, the rotation angle is positive in the direction of the first coordinate system * / / * 1 transform-origin: top left; / * / / the coordinate system is established in the upper left corner * / transform: skew (45deg,-30deg) } I am going to tilt the box above is all the contents of this article "how to use the skew function in css". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!