Pure CSS new 3D effect • Hacker News Board

Re: Pure CSS new 3D effect

#21

Post by eru » Tue, Jan 26, 2010, 6:38 PM UTC

amichail wrote: post #20

middus wrote: post #2

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

Why are you interested in hacks? What's wrong with using better tech such as OpenGL?

> Why are you interested in hacks?

Did you notice the name of this site? (And yes, for practical purposes OpenGL can be better.)

Re: Pure CSS new 3D effect

#22

Post by amichail » Tue, Jan 26, 2010, 7:05 PM UTC

eru wrote: post #21

amichail wrote: post #20

Earlier quoted context omitted.

Why are you interested in hacks? What's wrong with using better tech such as OpenGL?

> Why are you interested in hacks? Did you notice the name of this site? (And yes, for practical purposes OpenGL can be better.)

This site is more about startups than hacks.

Re: Pure CSS new 3D effect

#23

Post by polynomial » Tue, Jan 26, 2010, 7:53 PM UTC

PROTIP: Try hiding the the width and the float on p and/or the padding and width on the 'div div' with firebug.

Re: Pure CSS new 3D effect

#24

Post by faramarz » Tue, Jan 26, 2010, 8:14 PM UTC

Very cool. My question is.. how did he scan the coke-can? http://www.romancortes.com/ficheros/coke-label.jpg

Re: Pure CSS new 3D effect

#25

Post by m0th87 » Tue, Jan 26, 2010, 8:22 PM UTC

coderdude wrote: post #5

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

Strange, I had to refresh the page twice to get the effect to work correctly in Chrome. Each time it worked progressively better!

Re: Pure CSS new 3D effect

#26

Post by eru » Tue, Jan 26, 2010, 9:17 PM UTC

amichail wrote: post #22

eru wrote: post #21

Earlier quoted context omitted.

> Why are you interested in hacks? Did you notice the name of this site? (And yes, for practical purposes OpenGL can be better.)

This site is more about startups than hacks.

Perhaps. And the focus was even more sharp in the early days, when the name was still "startup news". Still, interesting hacks seems to have their place here.

Re: Pure CSS new 3D effect

#27

Post by dtegart » Tue, Jan 26, 2010, 9:53 PM UTC

sscheper wrote: post #14

That looks great. No trying to be a dick, but what's the point?

Well the first time you do it to see if you can, the second time because you can and the third time you use it to see if you can do something else

Re: Pure CSS new 3D effect

#28

Post by javanix » Tue, Jan 26, 2010, 10:22 PM UTC

faramarz wrote: post #24

Very cool. My question is.. how did he scan the coke-can? http://www.romancortes.com/ficheros/coke-label.jpg

I bet you could do it without "scanning it" per se.

Taking a set of pictures and then using stitching software, followed by some Photoshop touch-ups would probably give you a pretty good start.

Re: Pure CSS new 3D effect

#29

Post by ams6110 » Wed, Jan 27, 2010, 1:55 AM UTC

middus wrote: post #2

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

I think it could be used on any kind of catalog page to allow users to rotate the product image. Wonder what it would take to add a vertical scroll so you could rotate it in any direction. This kind of image manipulation is something I have no experience in.

Re: Pure CSS new 3D effect

#30

Post by flog » Wed, Jan 27, 2010, 9:27 AM UTC

morphir wrote: post #11

flog wrote: post #6

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 b…

I got js disabled. And the effect worked fine.

Yep, cool - it just means a lot of empty div structures (n * width) to contain the samples... I assumed JS as it would have been more efficient.