All entries in topic: perspective
Paul Hayes Creates a Sphere with 3D CSS
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.
HTML5 iPad Simulator by Alex Wolkov
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.
Zachary Johnson’s Pure CSS3 Animated Map Markers Experiment is a Bitter Disappointment
Sure, animated map markers look cool, and the fact that they’re pure CSS is awesome. My problem is not the technology, it’s with the experiment. When I saw the animated circle radiating outward on the Transmit 4 website I didn’t think “map markers”, nor did any other self-respecting geek.
What is the most obviously awesome application of this effect? Of course, it’s the motion tracker from the movie Aliens. Anyone up to the challenge?
Check Out the Morphing Power Cube on the WebKit Site
Found something called a “Morphing Power Cube” demo on the WebKit site. It spins, it’s 3D, it’s a cube. Far out.
Oh and it uses a WebKit CSS property called -webkit-backface-visibility, which I’ve never heard of before. It seems to have a very narrow usage in that you only use it “to specify whether or not an element is visible when it is not facing the screen.”
Guillermo Esteves Reproduces the Star Wars Story in WebKit CSS
This creation by Guillermo Esteves is a faithful reproduction of the Star Wars opening sequence in every way and a very impressive use of CSS3, WebKit animation, and HTML5 audio. It’s so convincing that when the text moves off into the distance and the theme music becomes quiet, you’re totally ready for the Rebel blockade runner to streak across the screen.
