7 ms·
Pure CSS new 3D effect
Even better than the 3D Meninas
- coderdude 17y agoThe other examples on his blog are even cooler... check this out. http://www.romancortes.com/blog/css-3d-meninas/ http://www.romancortes.com/blog/css-3d-meninas/
- ableal 17y agoAnd that one points to an explanation of the method, with diagrams and the partial pictures used: http://www.romancortes.com/blog/3d-meninas-explained/ http://www.romancortes.com/blog/3d-meninas-explained/
- m0th87 17y agoStrange, I had to refresh the page twice to get the effect to work correctly in Chrome. Each time it worked progressively better!
- flog 17y agoNice 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)
- morphir 17y agoI got js disabled. And the effect worked fine.
- flog 17y agoYep, 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.
- ajross 17y agoNo scripting. Here's a direct link to the effect page: http://www.romancortes.com/ficheros/css-coke.html http://www.romancortes.com/ficheros/css-coke.html Looks like it's just slicing up a wraparound texture vertically -- no scaling, just subsampling. The can and highlight are just composited on top. Slick and clever. Note that it's really not "3D" in a meaningful sense. It's doing pixel-aligned warping only, and is hard-coded to a cylinder (any "lathe" shape would also work). This is the same trick that the Amiga used for the bouncing ball in 1985.
- middus 17y agoAwesome hack. I don't really have any application for this, though.
- dagw 17y agoWell 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.
- amichail 17y agoWhy are you interested in hacks? What's wrong with using better tech such as OpenGL?
- eru 17y ago> Why are you interested in hacks? Did you notice the name of this site? (And yes, for practical purposes OpenGL can be better.)
- ams6110 17y agoI 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.
- robotron 17y agoThis 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.
- levesque 17y agoSeems cpu intensive :) Server down.
- tvon 17y agoWere it CPU intensive it would be so on the client side and have no affect on the server, and fwiw, scrolling back and forth quickly I saw no cpu spike (fairly new MBP, granted). It's more likely that the site has been taken down by being posted on sites like HN/reddit/digg/etc (it was easier when we could just say it was "the /. effect").
- vinhboy 17y agoWow amazing. Now I feel like a total CSS noob.
- deleted 17y ago[deleted]
- citricsquid 17y agohttp://m00d.net/mirror/coke/ http://m00d.net/mirror/coke/ <- mirrored.
- deleted 17y ago[deleted]
- sscheper 17y agoThat looks great. No trying to be a dick, but what's the point?
- nobosh 17y agoThis is slick. I wonder how long it took to build that image/
- sandGorgon 17y agowow!
- polynomial 17y agoPROTIP: Try hiding the the width and the float on p and/or the padding and width on the 'div div' with firebug.
- faramarz 17y agoVery cool. My question is.. how did he scan the coke-can? http://www.romancortes.com/ficheros/coke-label.jpg http://www.romancortes.com/ficheros/coke-label.jpg