Pure CSS 3D product shots from a 2D graphic

@TomB & @SamA74

Sorry, missed these posts.

You can definitely develop more complicated shapes, but it starts to move away from what you might call and elegant solution.

Jim Savage made this Warhol Soup Can model that you can roll and turn.

From memory it has 24 facets on the wrapping face. It’s pretty ingenious, but probably getting to the stage where you’d use WebGL instead.

I built this 3d folding milk carton recently (click the ‘construct’ box).

It’s not a polished, finished demo, but I wanted to see how easy it was to animate folding surfaces - perhaps for applications like origami demos, or paper planes.

At this stage, it feels like the CSS rendering engine struggles with complicated surface angles and depth. I calculated where surfaces should meet, but still had edges poking through opposing faces.

But it’s very good with rectangles and boxes, and that makes up a LOT of what you might want to render - Video games, product boxes, DVD cases, software packaging, etc.

You can also integrate the model with a photo background to create a ‘studio shoot’ look.

http://codepen.io/alexmwalker/pen/rVpPGw

4 Likes

The old X Y axis “rectangles” vs. radian limitations?

1 Like

OMG, this is so amazing!
Looks like there will be an “Export to CSS” option in 3dsmax and Blender soon

3 Likes

That’s the sort of thing I was thinking of. Great work. :thumbsup:

I was thinking when I was looking at those, the css for more complex geom would take some coding, but it is something that could be done by script if someone were to write one.
Interesting, because in my “real” job I do 3D using mainly 3dsmax. But working in video, I usually render my animation frames for that purpose, I’ve not really looked into exporting models for web viewing.

I think realtime rendering still can be relatively slow, especially for mobile devices
So I wouldn’t use it anywhere except specialized 3d sites

Amazing stuff! Really impressed with this. I wonder what the performance of more complex models would actually be like.

I can’t imagine it will be good. As Alex said;

But good for relatively simple models when you don’t want to rely on plugins and scripts.

Performance – as in rendering speed/processor loads – aren’t really a big issue. I’m using a 2011 macbook pro and I’ve never noticed the fan going crazy, and I’ve sometimes had 5-6 tabs running animating models at once.

I’ve found there are some CSS transforms that always smash you - for instance, animating scale and opacity at the same time always makes my laptop sound like a taxi-ing jumbo. But static transforms don’t tax the browser much, and even animations are fairly lightweight because we’re not changing lots of different properties.

The main issue with complicated models is the lack of sophistication in the rendering engine. I used pythagoras’s theorem with the milk carton to calculate the correct triangles edge lengths and angles, but you still get visual glitches on screen. You end up building little pixel hacks into it to try to cover the glitches, and things get progressively uglier.

But there is more than one way of tackling a problem, and there’s a good chance that there is a better way of approaching the milk carton construction than the way I did it.

I’ve had this idea for starting with a flat rectangle, and folding it into a simple airplane using CSS. So anyone looking for a nice challenge? :wink:

Looks real good… I want to see more.

not work well on firefox developer edition

Thanks ! your post really help me , i am new in css designing so , it help me and i am going to use it

Really this is great post for html and css.

Blimey alexmwalker that’s not too shabby.

But why only the top part of the book?

Did you try the scollbar right side of the onebox?
Alternatively, go to “Edit on CODEPEN” and maximize the view pane.

Show me the scroll bar :

great work alex !! :grinning:

Nice info regarding CSS 3d Thanks for Sharing…

Posted edited by cpradio, removed fake signatures

This is really amazing man. you step by step guide will surly help me improving my Design Style.

I find it very interesting as I am looking for light weight html to develop 3d games.

That is some impressive css. I’m curious as to what you have tested for to see where the caveats exist. Such as increasing the speed of the rotation or rendering more than one?