diTii.com Digital News Hub

Sign up with your email address to be the first to know about latest news and more.

I agree to have my personal information transfered to MailChimp (more information)


Animated CSS3 Cube Using 3D Transforms

Paul Hayes interesting work simulating a 3D animated cube using CSS3, hence they happen on the GPU on the iPhone/iPad and are quite fast: “A 3D cube can be created solely in CSS, with all six faces. Using JavaScript to detect key presses and update inline styles this cube can be intuitively navigated.”

Paul achieves this by having each face of the cube be a unique DIV, each with a ‘face’ class and inside of a larger ‘cube’ class all wrapped by an ‘experiment’ class.The outer wrapper is the camera and allows you to apply perspective and where you want the perspective origin to be. The #cube itself is given a size, CSS transition properties so things will animate nicely, and an instruction to preserve 3D children and not ‘flatten’ them. Each of the faces is given some common styling. The individual face DIVs are then rotated and translated in 3D space into their correct positions.

More Info: Animated CSS3 cube using 3D transforms

Share This Story, Choose Your Platform!

Get Latest News

Subscribe to Digital News Hub

Get our daily newsletter about the latest news in the industry.
First Name
Last Name
Email address
Secure and Spam free...