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).
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 :
Browser resolutions look very different, rotated 28 degrees.
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.