All entries in topic: rotate

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.

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.

Carrying on the long standing tradition of web designers to recreate everything using only CSS, Andrea Jacob renders the Internet Explorer logo sans-images. It’s a mind-bending array of styled div elements; and a fiendishly clever method for implementing the yellow orbit ring. Check it out.

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!

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

Web designers are going bonkers over WebKit CSS3 animation. Alex Girón’s latest contribution is an animated display of our solar system. Looking at the CSS, it’s very simple. Safari seems to run it the best. He’s even got the asteroid belt in there :) .

This one is slightly mind-boggling. Román Cortés has created an impressive simulation of page turning using nothing but CSS3 animation. It runs very smoothly in Chrome, but it a little shaky in Safari.