Pure CSS new 3D effect

#1

Post by texeltexel » Tue, Jan 26, 2010, 11:03 AM UTC

Even better than the 3D Meninas

Pure CSS new 3D effect
romancortes.com

Re: Pure CSS new 3D effect

#2

Post by middus » Tue, Jan 26, 2010, 12:33 PM UTC

Awesome hack. I don't really have any application for this, though.

Re: Pure CSS new 3D effect

#3

Post by robotron » Tue, Jan 26, 2010, 12:39 PM UTC

This experiment is definitely worthy of a post. I haven't looked at how he did that or the "CSS Bird" shadow effect but I'm impressed that can be done without Javascript.

Re: Pure CSS new 3D effect

#4

Post by dagw » Tue, Jan 26, 2010, 12:42 PM UTC

middus wrote: post #2

Awesome hack. I don't really have any application for this, though.

Well I can think of a use or two for the bird example, but I'm unsure why I'd want to use this method over something javascript based.

Re: Pure CSS new 3D effect

#5

Post by coderdude » Tue, Jan 26, 2010, 12:52 PM UTC

The other examples on his blog are even cooler... check this out. http://www.romancortes.com/blog/css-3d-meninas/

Re: Pure CSS new 3D effect

#6

Post by flog » Tue, Jan 26, 2010, 1:02 PM UTC

Nice effect.

I think a bit of JS is being used to create the DIV structure, but that's not important.

It could also be improved a bit: you could remove the shading gradient from the Coke can mask PNG, and render the shading using an CSS gradient with RGBA values. That would mimic the specular highlighting, and you could also animate the shading.

I still haven't quite grok'd the displacement method though... it must be carefully calculated background x pos offsets? (I don't have firebug on this machine)