All entries in topic: transform

Paul describes the recipe for making cool 3D shapes using a dash of CSS3 and a crap load of HTML elements. The recipe includes the -webkit-transform-style: preserve-3d; statement which I hadn’t seen before. Apparently it makes sure that an element’s children share the same 3D space as their parent, instead of being flattened. Not that I have any real understanding of what that means or anything.

Tom Robinson and others have created evil.css. It’s a dastardly collection of CSS rules to mess with a user’s mind if you can inject this CSS file into the browser session. It can flip images upside down, make the page blurry, blink headings, cause elements to fade away and so on. It’s hilarious!

Kris Triplett has created the haunting spectre of Darth Vader’s head out of nothing but HTML and CSS3. It’s really a whole bunch of div elements with some crafty use of border radius and CSS transforms.

In this nifty demo David, manipulates some CSS3 animation properties using a dash of JavaScript to created an exploding image effect. He based it on an exploding text example created by Ryan Florence who also wrote the JavaScript animation library David’s demo uses.

Here’s a nifty effect curtesy of CSS3 animation. The front most element is in focus while the other elements are displayed slightly blurry and scaled down creating depth of field. Make sure to check out part 2 as well.

Check this amazing HTML5 canvas demo. Joe takes original graphics from old 8-bit adventure games, converts them to JSON data and uses a canvas element to animate them in realtime—sound effects included.

Amazing work by Alex. A mostly-functional iPad simulator—with working apps! Well not all of them, but still Pretty cool. The source code is on github too.

Viewing this I had to open firebug to prove to myself that there were no images used; but it’s true, this is a Pure CSS3 Fail Whale. Every element, including all those little birds, is made up from CSS-styled div elements. If you check it out in Safari or Chrome you get a surprise: animation!

Gordon Brander has implemented a Mac OS X Leopard-style stack menu in pure CSS3; no JavaScript required.

Gerwin Janssen applies HTML5 and CSS3 technology to ASCII art and creates an animated ROFL Copter. It’s hypnotically beautiful.