CSS 2D Transformations!

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

Some links:

The Guardian  • Washington Post  • The Holy Bible (Scaruffi.com)

In this half of the page, we're going to look at the Translate and Rotate effects. This is the left half.

View SASS Markup

translate()

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

Something to take note of: These transformations have a kind of "flickering" effect, if you idle the mouse pointer in an inconvenient spot. I am unsure how to remedy this.


rotate()

This box has the rotate() effect. At the beginning, it's right-side up. Hover over here, and watch it turn upside down!.

Wow, look at all of these cool CSS transformations. Pretty nifty, huh? Notice they all have :hover triggers and transitions. There's some more text here, there has to be text here so the page looks more complete. Even more text. Oh wow gee.

→ → → → →

In this half of the page, we're going to look at the Scale and SkewX effects. This is the right half of the page. The box to the left should be a reddish color. This box is a light blue. There's a whole bunch of text in here, most of it doesn't really say anything.

View Compiled CSS

scale()

This box has the scale() effect. It starts at one size, but on a hover, it will grow to a much bigger size.

Something to take note of: These transformations have a kind of "flickering" effect, if you idle the mouse pointer in an inconvenient spot. I am unsure how to remedy this.


skewX()

Now... THIS BOX is.... askew! This box has the skewX() effect. Hover over here and watch this box transform!

Here's the bottom of the right box. Look at all of this text. This text says nothing. Walls walls walls. Tear town these walls of text! This is a regular Berlin Wall of text, isn't it? FREE PALESTINE 2018

← ← ← ← ←