Can I distort an image with CSS3?

Skew elements using the CSS3 transform: skew command

Another form of transformation is tilting, i.e. the representation in a distorted, oblique, (wind) oblique, twisted or oblique type of elements. This is what the CSS3 command is for

This command will also be exciting when you use it later for animations. Here are the basics and the structure of the CSS3 instruction.

Examples with numbers. The values ​​are given in degrees!

In the first example, the display is shown at an angle, only in the X direction. It is shown skewed.

If two different values ​​are given for X and Y, the display will be angled - the larger the values ​​are apart, the greater the distortion.

Important is:

  • no space after or before the bracket
  • Values ​​after the decimal point are given with a point, e.g. 1.4

And here, too, the information as with the other commands for the old browser versions

The behavior of the command becomes interesting for degrees above 90 degrees or below -90 degrees. Just test it in the live demo of CSS3 transform. Why it moves to the right with positive information - I have no idea who is figuring it out, please write an email to me :).

Task for the CSS3 command transform: skew ();

To test the CSS commands, recreate the following appearance.

  • The 2nd playing card is just crooked, so only the value X has been changed
  • on the 3rd card, X and Y are changed in the same way
  • on the 4th card, the information between X and Y differs

Map 2 should be displayed in a distorted manner.

In order not to reinvent the wheel, the code can be used for the general representation of the maps.

Recommend • Social Bookmarks • Thank you

If you find a bug, please let us know (no matter if typographical or content-related error).

With a mouse Mark the faulty point and take over with the following button:

After submitting it comes here feedback! Please do not send twice. Thanks.