All entries in topic: perspective

Paul Hayes Creates a Sphere with 3D CSS

Posted on April 22, 2011 in It's a Cube

sphere-normal

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.

2 comments already, add yours...

HTML5 iPad Simulator by Alex Wolkov

Posted on February 19, 2011 in Pushing The Envelope

ipad-sim

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.

Add a comment...

Zachary Johnson’s Pure CSS3 Animated Map Markers Experiment is a Bitter Disappointment

Posted on May 2, 2010 in Designers Gone Wild

css3-map-markers

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?

Add a comment...

Check Out the Morphing Power Cube on the WebKit Site

Posted on March 26, 2010 in It's a Cube

webkit-3d-cube

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.”

Add a comment...

Guillermo Esteves Reproduces the Star Wars Story in WebKit CSS

Posted on March 21, 2010 in It Moves!,Pushing The Envelope

css-star-wars-title-sequance

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.

Add a comment...