2: Understanding 2D CSS Transforms

Last updated
Save as PDF

Page ID: 20099

\( \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}}\)

Understanding CSS Transforms

Chapter 2: Overall Learning Objectives

Understand what CSS Transforms are
Learn to Apply 2D CSS Transforms
Work with best practices for 2D CSS Transforms

Introduction to CSS Transforms

What are CSS Transforms?

The CSS transform property was a part of the first draft of the CSS3 Animations specification that was introduced by the W3C on March 20, 2009.¹ Transforms can be applied in both the 2D and 3D spaces.

Transforms are like snapshots of where an object is or how it looks at a given moment in time rather than the object fluidly going from one point to another point. They're a great place to start our journey of learning animation together.

Definition: CSS Transform

"The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model."²

Concept

Transforms are like snapshots of where an object is or how it looks at a given moment in time rather than the object fluidly going from one point to another point.

Let's look at the different types of 2D transforms that can be used: rotate, scale, skew, translate, transform-origin, and transform style.

Footnotes

Jackson, Dean, et al. “CSS 3D Transforms Module Level 3.” CSS 3D Transforms Module Level 3, Word Wide Web Consortium (W3C), 20 Mar. 2009, https://www.w3.org/TR/2009/WD-css3-3d-transforms-20090320/.
“Transform - CSS: Cascading Style Sheets: MDN.” CSS: Cascading Style Sheets | MDN, MDN Web Docs, https://developer.mozilla.org/en-US/docs/Web/CSS/transform.