2.3: 2D CSS Transforms - skew()
- Page ID
- 20578
\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)
\( \newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\)
( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\)
\( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)
\( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\)
\( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)
\( \newcommand{\Span}{\mathrm{span}}\)
\( \newcommand{\id}{\mathrm{id}}\)
\( \newcommand{\Span}{\mathrm{span}}\)
\( \newcommand{\kernel}{\mathrm{null}\,}\)
\( \newcommand{\range}{\mathrm{range}\,}\)
\( \newcommand{\RealPart}{\mathrm{Re}}\)
\( \newcommand{\ImaginaryPart}{\mathrm{Im}}\)
\( \newcommand{\Argument}{\mathrm{Arg}}\)
\( \newcommand{\norm}[1]{\| #1 \|}\)
\( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\)
\( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\AA}{\unicode[.8,0]{x212B}}\)
\( \newcommand{\vectorA}[1]{\vec{#1}} % arrow\)
\( \newcommand{\vectorAt}[1]{\vec{\text{#1}}} % arrow\)
\( \newcommand{\vectorB}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vectorC}[1]{\textbf{#1}} \)
\( \newcommand{\vectorD}[1]{\overrightarrow{#1}} \)
\( \newcommand{\vectorDt}[1]{\overrightarrow{\text{#1}}} \)
\( \newcommand{\vectE}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash{\mathbf {#1}}}} \)
\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \)
\( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)
- Gain an understanding of skew() in the horizontal, vertical, and all directions.
2D CSS Transforms - skew()
When you skew an object in CSS you introduce a slant to it. You can slant it right, left, up, and down! You can even slant it in two directions at once.
The skew() "transformation is a shear mapping that distorts each point within an element by a certain angle in the horizontal and vertical directions. The effect is as if you grabbed each corner of the element and pulled them along a certain angle."1
Figure 1: Skewing on Horizontal, Vertical, and Both Axes
Skewing on the X Axis (Horizontal)
In an animation environment, this is a truly useful property when it comes to making something wobble especially from side to side. The skew() function can be set with either one or two values measured in degrees. If you use just one value, the object will be affected on the x-axis only. Let's look at how to code this.
selector {
transform: skew(Xdeg);
}
**In this example, there are two things being represented by "Xdeg." X is equal to the numerical amount and degrees will be represented by the abbreviation 'deg' in your code.
So, if we put this into code, it would look like what you see below. I have entered '20' for the numerical amount of degrees to skew the rocket. This will slant the rocket 20 degrees to the left.
.rocket {
transform: skew(20deg);
}
Now, it's your turn to play with the code. Here's our next CodePen.
1. In a Chrome browser window, type "transform: skew(20deg);" between the open and closing curly braces for the #skew selector. Notice how the rocket leans to the left.
2. Next, let's try a negative value and see how that affects the rocket. Type "transform: skew(-20deg);" between the open and closing curly braces for the #skew selector. The rocket now leans to the right instead of the left.
3. Play with a few more values and see what they do. Use both positive and negative numbers.
See the Pen skew() one direction (X Axis only) by Rosemary Williams Barker (@rosemary-williams-barker) on CodePen.
- Answers
-
1. .rocket {
transform: skew(20deg);
}
2. .rocket {
transform: skew(-20deg);
}
Skewing on the Y Axis (Vertical)
Skewing an object on just the Y Axis will require us to use two values for the skew() function. It will look like this:
selector {
transform: skew(0deg, Ydeg);
}
Did you see how the 'X' value changed in this one? There is a zero replacing the number there. That is because we don't want the X value to change. Only the Y value should change this time around. Let's see it in real CSS code.
.rocket {
transform: skew(0deg, 20deg);
}
Here's the CodePen for you to try it out on.
1. In a Chrome browser window, type "transform: skew(0deg, 20deg);" between the open and closing curly braces for the #skew selector. Notice how the rocket slants downward.
2. Next, let's try a negative value and see how that affects the rocket. Type "transform: skew(0deg, -20deg);" between the open and closing curly braces for the #skew selector. The rocket now upward instead of downward.
3. Play with a few more values and see what they do. Use both positive and negative numbers.
See the Pen skew() one direction (X Axis only) by Rosemary Williams Barker (@rosemary-williams-barker) on CodePen.
- Answer
-
1. .rocket {
transform: skew(0deg, 20deg);
}
2. .rocket {
transform: skew(0deg, -20deg);
}
Skewing on Both the X and Y Axes
Skewing on both the X and Y axes is quite easy. You just change both of the values for the parameters rather than just one.
selector {
transform: skew(Xdeg, Ydeg);
}
Here is how it would look in CSS code:
.rocket {
transform: skew(30deg, 30deg);
}
Here's the CodePen for you to try it out on.
1. In a Chrome browser window, type "transform: skew(30deg, 30deg);" between the open and closing curly braces for the #skew selector. Notice how the rocket slants downward.
2. Next, let's try a negative value and see how that affects the rocket. Type "transform: skew(30deg, -30deg);" between the open and closing curly braces for the #skew selector. The rocket now faces upward instead of downward.
3. Play with a few more values and see what they do. Use both positive and negative numbers.
See the Pen skew() one direction (X Axis only) by Rosemary Williams Barker (@rosemary-williams-barker) on CodePen.
- Answer
-
1. .rocket {
transform: skew(30deg, 30deg);
}
2. .rocket {
transform: skew(30deg, -30deg);
}
Footnotes
1. “Skew() - CSS: Cascading Style Sheets: MDN.” CSS: Cascading Style Sheets | MDN, MDN Web Docs, https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skew.