CODEWITHSUNDEEP
javascripthtmlcsshtml5-animation
Hasanavi
Hasanavi

Reputation: 8625

Real world 3D model using CSS3 / Javascript

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?

Upvotes: 0

Views: 2982

Answers (2)

Endre Simo
Endre Simo

Reputation: 11541

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!

Upvotes: 0

Caio Bianchi
Caio Bianchi

Reputation: 113

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

Upvotes: 1

Related Questions