Real world 3D model using CSS3 / Javascript

2.9k Views Asked by At

I need to rotate/animate 360 deg. a real world 3D object from Smart Phones browsers. When a user scrolls on screen that real world object (e.g. a car) needs to rotate or animate. One option can be replacing images one after another.

Is there any better solution anyone can offer using CSS3/Javascript?

2

There are 2 best solutions below

2
On

There's a Javascript 3d Library called Three.js - https://github.com/mrdoob/three.js/ Or if you're looking for something more simple like vectors, you might wanna check out Raphael.js - http://raphaeljs.com

2
On

Three.js won't be the best choice for mobile browsers, considering the WebGL implementation is still a desire on iOS Safari even it's not the case with Android. CSS3 is not capable of working with high complexity 3D object manipulation, so from this perspective is somehow limited. It has all the 3D (rotation, scaling and transformation) functionalities but for post processing effects - which can be obtained with shaders - are out of scope.

But there is a nice little library which combine Javascript with CSS3 to create some 3dish effects: http://www.edankwan.com/lab/css3dEarth

I think this is what You need!