CSS3 transforms are very powerful tools as they lets you modify the coordinate space of the CSS visual formatting model. Using transforms, page elements can be translated, rotated, scaled, and skewed using only CSS properties with no JavaScript at all. Currently, there are 6 types of 2D CSS3 transforms [Note: there are matching 3D transform functions: translate3d(), scale3d(), rotate3d()]

  • scale(factorX, factorY): Affects the size of the element. This setting also applies to font sizes, paddings, heights, and widths of elements, so size changes occur in a coordinated manner. Although people use this transform it its shorthand form scale (factorX, factorY) scaling factors can be specified using the individual scaleX() and scaleY() functions.
  • translate(distanceX, distanceY): Moves (translates) an element vertically and/or horizontally. Distances are specified using pixel count, percentages, em units, etc.
  • skewX(valueX) and skewY(valueY): Tilts or slants an element to the left or right, like turning a triangle into a parallelogram. While some browsers support the shorthand skew() property, several others don’t, so the safest choice is to specify each skew direction individually.
  • rotate(ANGLE unit): rotates the element clockwise from its current position. The ANGLE value is a number (integer or float) and unit can be deg, grad, rad or turn (deg = angle in degrees, grad = angle in gradians, rad = angle in radians, turn = angle in a number of turns). Using a positive element rotates the element clockwise, whilst a negative value rotates it counterclockwise.
  • matrix(): Matrix CSS3 transforms combine all transforms into a matrix linear transform. You can see more on the matrix()transforms here.
  • perspective(distance): Doesn’t affect the element itself, but affects the transforms of descendant elements’ 3D transforms, allowing them all to have a consistent vanishing point.

CSS3 transforms. Creating a rotating “Swoosh!” effect

Enough theory for now. Let’s see a practical example how transforms can be useful to get some cool effects on our pages. Let’s suppose we have a div with an image background and we want the background to rotate every time we hover it. Using the rotate() transform (combined with the transition property to animate the transform) to make the div to rotate clockwise when hovering the image.

See the Pen Swoosh! by Iván Melgrati (@imelgrat) on CodePen.light

CSS3 stacking contexts. How do DOM elements pile up in the browser?

As you can see, CSS3 transforms affect the element not only the .swoosh div but its children .inner-content. If you want to make the whole section to rotate, look no further as this is already happening. Instead, if you don’t want the content inside the rotating logo to remain still while the .swoosh div rotates, we need some extra work.

When the transform property has a value different than none, a stacking context is created. Stacking contexts are treated atomically as a single unit in the parent stacking context. In other words, if you apply a transform to a page element, all its children will be transformed as well. These are the rules governing stacking contexts in a Web page.

  • Stacking contexts are contained in other stacking contexts, and together create a hierarchy of stacking contexts.
  • Each stacking context is completely independent from its siblings: only descendant elements are considered when stacking is processed.
  • Each stacking context is self-contained: after the element’s contents are stacked, the whole element is considered in the stacking order of the parent stacking context.

Children vs. Siblings

As I mentioned above, when you transform a DOM element this also transforms all children sub-elements. Also, CSS transforms do not affect parents or siblings. So, we can move the .inner-content element outside and place it as a sibling. This will prevent any transforms on the .swoosh element from affecting the inner content.

See the Pen Swoosh! by Iván Melgrati (@imelgrat) on CodePen.light

Unfortunately, moving the .inner-content outside makes it fall below the .swoosh div. How do we fix this? We make .inner-content‘s position fixed, so it’s positioned relative to its first relatively positioned (not static) ancestor element. Also, we need to add top and left positions to place the inner image at the center of the .swoosh. This is so because the .swoosh background image does not have its “transparent hole” at div’s center.

See the Pen Swoosh! by Iván Melgrati (@imelgrat) on CodePen.light

Final tips

As you can see on the last example, I added z-index properties to the 2 divs. This makes .inner-content fall below.swoosh in the DOM stacking order. This brings up the :hover pseudo-class while hovering anywhere on the .swoosh div.

Otherwise, hovers will only trigger where there’s no superposition between the 2 sibling divs, making the effect shaky. You can also accomplish this by moving the .inner-content div above the .swoosh div. This way, they will stack up the way we want them to (.inner-content below .swoosh).

CSS became increasingly powerful over the past few years and CSS3 transforms are a prime example of this. When combined with CSS animations, you get sophisticated, powerful effects on your page’s HTML elements.

Summary
Swoosh! Using CSS3 transforms to animate page elements
Article Name
Swoosh! Using CSS3 transforms to animate page elements
Description
Using CSS3 transforms, page elements can be translated, rotated, scaled, and skewed using only CSS properties with no JavaScript at all.
Author
Publisher Name
Iván Melgrati
Publisher Logo