CSS 3D Transformations!

← ← ← ↑ ↑ ↑
↓ ↓ ↓ → → →

In this half of the page, we're going to look at the 3D versions of translate, rotate, and scale effects. Please look at this SASS markup, it's beautiful, it's gorgeous!

View SASS Markup

translate3d()

This box has the translate3d() effect. It starts in one spot, but, if you hover over it, it will move to a completely different spot. Wow!

Here's some more text, to take up space on the page. Look at all of this text. It says nothing. These are pretty weird transformations, huh?


rotate3d()

This box has the rotate3d() effect. Watch it flip around the page! This rotate transformation has a "hover" trigger.

And then there's some more text down here. Woooah goodbye down text. I wish this page looked better. I don't know how to make it look better, but I wish it looked better.

→ → → → →

Whatever you do, DON'T look at this CSS! It's messy, and gross, and makes no sense. It's a big blog of gibberish that doesn't even look nice. CSS? No such thing.

View Compiled CSS

scale3d()

This box has the scale3d() effect. Woah turn around woah

Wow, look at all of these words. These words say something, and these words don't. Saying things on a web page looks like this. Make sure you Save the Jews! this weekend!


skewX()

skewX() VØID.VØID.VØID.VØID.STRÉÉÉÉEEETCH

And then there's some more text down here. Bottom text, text on the bottom. Gee. These words say nothing, and neither do these. No words no thoughts no sentences. Post-rock music 2010. Free Palestine.

← ← ← ← ←