0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>While spending the night in an uncomfortable cave, Pendalf decided to pass the time by learning some more CSS magic.</p>
1
<p>While spending the night in an uncomfortable cave, Pendalf decided to pass the time by learning some more CSS magic.</p>
2
<p>There is still another feature of CSS transforms: skewing an object along the X and Y axes at a given angle. You can skew objects using the skewX and skewY functions.</p>
2
<p>There is still another feature of CSS transforms: skewing an object along the X and Y axes at a given angle. You can skew objects using the skewX and skewY functions.</p>
3
<p>The skew angle is set in degrees (deg). For example:</p>
3
<p>The skew angle is set in degrees (deg). For example:</p>
4
transform: skewX(45deg) transform: skewY(30deg)<p>For the X-axis, a positive angle skews the object to the left, and a negative angle skews the object to the right. For the Y-axis, positive and negative values skew objects down and up, respectively.</p>
4
transform: skewX(45deg) transform: skewY(30deg)<p>For the X-axis, a positive angle skews the object to the left, and a negative angle skews the object to the right. For the Y-axis, positive and negative values skew objects down and up, respectively.</p>
5
<p>In the example below, the first block is skewed 25° to the left, and in the second it is skewed 25° down:</p>
5
<p>In the example below, the first block is skewed 25° to the left, and in the second it is skewed 25° down:</p>
6
<p>transform: skewX (25deg);transform: skewY (25deg);</p>
6
<p>transform: skewX (25deg);transform: skewY (25deg);</p>
7
<p>Note that in addition to skewX and skewY there is a generalizing function skew, which takes two arguments: skew(skew-along-X [, skew-along-Y]). The Y-axis skew value is an optional argument, and the default value is 0. However, at the same time, the behavior of the skew function differs from the simultaneous use of skewX and skewY during a transform. It has turned out that over time skew only continues to be supported in browsers to ensure legacy content compatibility, and it has even been excluded from the working draft of the CSS specification. Generally speaking, it is better to use skewX and skewY instead of skew.</p>
7
<p>Note that in addition to skewX and skewY there is a generalizing function skew, which takes two arguments: skew(skew-along-X [, skew-along-Y]). The Y-axis skew value is an optional argument, and the default value is 0. However, at the same time, the behavior of the skew function differs from the simultaneous use of skewX and skewY during a transform. It has turned out that over time skew only continues to be supported in browsers to ensure legacy content compatibility, and it has even been excluded from the working draft of the CSS specification. Generally speaking, it is better to use skewX and skewY instead of skew.</p>
8
<p>So, what do you think? As soon as Pendalf learned the new spell, a cave monster, who somewhat resembled a dragon, came to visit him. Something told Pendalf that he wouldn’t be able to persuade his guest to leave simply by throwing fireballs…</p>
8
<p>So, what do you think? As soon as Pendalf learned the new spell, a cave monster, who somewhat resembled a dragon, came to visit him. Something told Pendalf that he wouldn’t be able to persuade his guest to leave simply by throwing fireballs…</p>