Create CSS optical effects by rotating HTML elements

I came upon a neat trick the other day when trying to rotate a div, if the background of the rotated element is set to a transparent .png it can produce some interesting effects. I was initially creating a striped background to overlay onto a full screen image in order to reduce the perceptive loss of image quality. I did not expect that rotating the container would clone and seemingly flip blocks of pixels.

> These effects only works in WebKit browsers (see below).

The rendering has a fractal quality you can test by zooming in and out,  though this technique is eventually limited to a single pixel resolution.

The examples below use a transparent 2×2 px .png, it doesn’t matter if the “stripes” are diagonal or straight, though they will produce different effects (example 5 uses a horizontal line).

png-example

You cans use the slider to change the degrees but it’s much better to use your keyboard arrows to increment the values (each degree looks very different from the next).

  • Example 1  – green on solid black
  • Example 2  – red on red with opacity
  • Example 3  – rotating body element (..use arrow keys…)  Why does the center box get the effect but the body does not?
  • Example 4  – rotating 2  “boxes” in opposite directions
  • Example 5 – rotating 2  “boxes” in opposite directions using “straight” lines
  • Example 6  – larger 14×14 px images do not produce replicated patterns, but an optical illusions if you stare long enough, and strange layouts at certain degrees.

These examples are only using : background: url(stripe-2.png) repeat; with CSS rotation via : transform:rotate(deg);

Browser resolutions look very different, rotated 28 degrees.

Chrome

chrome

FireFox:

firefox

IE9:

ie9

Why this is the case I’m not exactly sure, I suppose it has something to do with how WebKit’s algorithm deals with pixels using “blocks” to optimize rendering time. The patterns are repeated every “x” amount of pixels, so WebKit is probably cloning areas it thinks are duplicates,  my GoogleFu™ turned up little technical info.

On a side not of you want to create the stripe effect sans image you can use linear-gradient and the pattern will rotate normally.

ps. Props to http://leaverou.github.com/prefixfree/ since vendor prefix CSS and JavaScript are about as fun as cleaning an outhouse.

Advertisements

4 thoughts on “Create CSS optical effects by rotating HTML elements

  1. These patterns look like they are moiré patterns caused by aliasing. Basically that would suggest a fast rotation algorithm, that doesn’t try to antialias. I assume this is the cause of the patterns.

  2. Indeed these are moiré patterns, you can see them in real life too if you look at chain grid fences through eachother.

    These are specifically band moire, you can get more interesting patterns if you use curves. There’s also shape moire, e.g.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s