2.1: 2D CSS Transforms - rotate()
- Page ID
- 20110
\( \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 rotate()
2D CSS Transforms - rotate()
The first of our CSS Transforms that we will be looking at today is rotate().
When you rotate an element, you are spinning it in either a clockwise or counterclockwise motion around the object's center point.
Here are some commonly used angles for rotation:
Figure 1: Common angles of rotation
The way you set up this CSS property value is like this:
selector {
transform: rotate();
}
You set the rotation value by inserting a number from 0 through 180 followed by 'deg' like this:
selector {
transform: rotate(45deg);
}
A rotation by 180° is called point reflection.
Ready to play around with some code? I have included a live coding experience from CodePen for you below. Follow the instructions in the exercise as you type in the code editor.
- Open this page in Chrome if you have not done so already.
- Toggle back and forth between the CSS and HTML buttons. Note the code in each of those windows.
- In the CSS panel, create a transform property on the rotate ID. Set the value of the rotation property on the rocket to 90 degrees. (Note: You may or may not be able to see the cursor in the CodePen. If this happens, just go ahead and type like normal. If that is too confusing, click on the "Edit on CodePen" button to be taken to their site for easier editing.)
- Then, add a '-' sign in front of the number so that it reads like this: -90deg. Notice what happened to the rocket.
- Play around with two or three more values that you make up but keep those values between 0 and 180.
- Need help? Click on the "Answer" link below the CodePen to expand more information.
See the Pen 2D CSS Transitions: rotate(); by Rosemary Williams Barker (@rosemary-williams-barker) on CodePen.
- Answer
-
After step #4, you would have this in the CSS code:
#rotate {
transform: rotate(-90deg);
}
Footnotes
- MDN Web Docs. (2022, January 31). Rotate() - CSS: Cascading style sheets: MDN. CSS: Cascading Style Sheets | MDN. Retrieved March 1, 2022, from https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate().
- MDN Web Docs. (2022, January 31). Rotate() - CSS: Cascading style sheets: MDN. CSS: Cascading Style Sheets | MDN. Retrieved March 2, 2022, from https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate()#syntax.