Getting Started with 3D: CSS 3D Transformations

Working with 3D can be a daunting thing to get started with for many developers. Luckily, it doesn't have to be as complicated as you think to create professional looking 3D transformations with only a little bit of CSS magic. I wanted to help developers that are beginning their journey into 3D CSS transformations to get started with a few basics.

CSS Property: 3D Transform

3d CSS transforms can add depth and visual interest to elements on your page using perspective. The CSS transform property includes the following 3D transformation methods for mix-and-match use:

Rotate

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

Translate

• translateX()
• translateY()
• translateZ()

Skew

• skewX()
• skewY()

Scale

• scaleX()
• scaleY()
• scaleZ()

Additional

• transform-origin
• perspective

Example Usage

You can use the transform property on any CSS selector. You can also apply a transition to the hover state, or based on mouse or scroll location with the use of additional JS. This CSS-Transform Playground is an incredible resource built by Jorge Moreno that allows you to alter and view different mixtures of 3D CSS transform properties, with a toggle on the bottom to activate or deactivate the properties. Play around with the different sliders in this tool to craft your own mixture, and apply those property numbers to your project!

Here is an example of how you might apply a 3D transform with a hover state transition.

div {
  transform:
    perspective(800px)
    rotateY(25deg) scale(0.9)
    rotateX(10deg);
  transition: 0.6s ease all;
}

div:hover {
    transform:
      perspective(800px)
      rotateY(-15deg)
      translateY(-50px)
      rotateX(10deg)
      scale(1);
  }

Here are some examples of how you can mix and match 3D transforms to make some fun and unique interactions with cards. Feel free to copy the code into your own project and make these transformations your own!

Transform Example #1

Transform Example #2

Transform Example #3

Transform Example #4

Conclusion

I hope these examples allow you to overcome the hurdle of entering the world of 3D on the web. With resources like a visual css-transform playground and pre-build code examples, 3D CSS Transformations are not only easy to make, but will add a whole other level of fun and visual interest to your projects!

What are YOUR favorite 3D CSS Transformations? Share in the comments!!!

Additional Resources

3D CSS-Transform Playground
Polypane blog: CSS 3D Transform Examples
MDN Web Docs: transform