Episode 117

Transforming the Shapes with Eva Ferreira

June 30, 2016

Web pages are visually and technically a pile of boxes. By default, all those boxes are rectangles and squares. But they don't have to be any longer. With CSS we can now transform those rectangles into parallelograms, rhombuses, skewed boxes, circles, and elephants — or any shape we want. Eva Ferreira joins Jen Simmons to talk about what's possible and how to do it.

In This Episode

  • transforms
  • rotation
  • scaling
  • skewing
  • perspective
  • translation
  • clip-path
  • shape-outside
  • how CSS is born

Show Notes


Hi, I've been digging into transforms a bit and was also baffled about the "length" of perspective, and why a bigger number equaled a less dramatic effect.

I wrote a bit about it in my link, but basically the way I see it, `perspective` is to zoom as `transform: translateZ` is to dolly. In other words, from what distance did you have to zoom in order to have the element appear at that size in front of you.

If you set a camera very close to an object, you don't have to zoom in at all (low number), and the perspective of that object is very dramatic.

On the other hand, if you're a football field away from an object (high number) and have to zoom way in to see it, that distortion effect appears to be mich less and the appearance of planes flattens out a lot.

That means you can even do the kind of dolly-zoom effect made popular by Hitchcock in “Vertigo” and Spielburg in “Jaws”. I have more explanation and a demo in my website link.

(There are also interesting implications about simulating a realistic "cone of vision", but I haven't gotten around to breaking that down yet.) I hope this helps!

Perspective: think of it as the distance from the viewer, to the object. Higher value = greater distance = less intense effect. :) Great episode!

Great episode! Also, fantastic that Audible is a sponsor. Love my Audible subscription, have gotten other folks similarly addicted. Quite pleased to be seeing them sponsor other things I love.

I love codepen. The codepen homepage features fun and exciting ideas that stretch the limits of what you can do on the web. Nobody is actually telling you to use them on a website. Some web developers (me) are frustrated by always being told what to do and use codepen to stretch.

However, try searching tags on codepen: http://codepen.io/search/pens?q=typography&limit=all&type=type-pens

The first one on that page is one of mine; a CSS animated intro that was used on an actual website.