Getting Started with  3D: CSS 3D Transformations
Tags: css, beginners, codenewbie, codepen
Published: 2021-01-21 06:24:06

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](https://css-transform.moro.es/) is an incredible resource built by [Jorge Moreno](https://twitter.com/alterebro) 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

{% codepen https://codepen.io/lukekyl/pen/VwKNebe default-tab=css,result %}

##### Transform Example #2
{% codepen https://codepen.io/lukekyl/pen/yLarOma default-tab=css,result %}

##### Transform Example #3
{% codepen https://codepen.io/lukekyl/pen/XWjQKJa default-tab=css,result %}

##### Transform Example #4

{% codepen https://codepen.io/lukekyl/pen/QWKPEby default-tab=css,result %}

### 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](https://css-transform.moro.es/)
[Polypane blog: CSS 3D Transform Examples](https://polypane.app/css-3d-transform-examples/)
[MDN Web Docs: transform](https://developer.mozilla.org/en-US/docs/Web/CSS/transform)