Vasanth Krishnamoorthy

Software Engineer (Http'ster)

3D Animations on the web with CSS3

Our world is 3D, it’s interactive, it’s real-time. Well, it’s about time we bring it to the internet too!

Welcome to the age of 3D in browsers….

But wait, how do I do that?

There are several options: Flash, WebGL (Sweet Jesus) and libraries like three.js, but today let’s look into what CSS3 can do with it’s transforms

 css3d

CSS 3D transforms

Before we start to get technical on the various concepts, let’s understand that CSS was built to style documents. Nevertheless, 3D animations generate plenty of opportunities to innovate in designing better and more intuitive user interactions across the site or application. A good example would be in slide shows, switching views in a weather web app and building exploratory virtual environments of places. Just imagine Google street view in 3D… Sick, right??

weather-app-transition

Weather web app flip animation (Credits: David DeSandro)

Concepts

Perspective

To enable 3D space view, the element needs to create an illusion of depth along the z-axis which is precisely what perspective is all about

staircase

3D staircase (Credits: Luciano Testoni)

The CSS perspective: property sets an element’s position in 3D-space by affecting the distance between the Z plane and the viewer.

Demo:

See the Pen Perspective Origin Demo by Assaf Gelber (@agelber) on CodePen.0

3D Rotation

With the perspective: property being initialized we can now transform elements into 3 dimension with the z dimension or depth.

  • rotateX(angle)
  • rotateY(angle)
  • rotateZ(angle)

Imagine a sheet of paper with a string running through the middle and now with the top corners in your fingers, you can move the card up and down, left and right, and forwards and backwards around the string. This is precisely what the rotate() function does. It rotates the element around its point of origin by the degree value mentioned.

Demo:

3d Scale

This is just used to make things smaller or larger in scale. The functions scaleX(), scaleY() and scaleZ() take a numerical value which is used as a multiplier. Transformed elements don’t actually have any depth to increase or decrease, so with scaleZ() we move a 2-D object around in 3D space. So, when we use translateZ(20px) and scaleZ(2), this would translate an element by 50 px along the z-axis.

Demo:

 

3D virtual reality? Well, you can build that too…

Experimenting with 3D transforms is always fun and I recently rebuilt Gerard Ferrandez’s 3D mirror room just to play around and master it’s 3D vector intricacies.

Click and drag to explore the room and it’s amazing views.

See the Pen Mirror Room (CSS 3D Transforms) by Vasanth Krishnamoorthy (@vasanthkay) on CodePen.0

You can view it’s source code in my github account.

What else to know?

3D CSS transforms is a fun technique to have in your creative arsenal, but there is more to it that you can learn and play around with. Now is a great time to learn and start thinking about application of 3 dimensions in user interactions on the web. WebGL looks very promising too and I can’t wait to see what’s in store for it with. See you guys on the other side 🙂

 

DROP A COMMENT

Your email address will not be published. Required fields are marked *