When 3D transforms first came out they were the sort of thing you'd only see on experimental websites that could only run on the latest editions of either firefox or chrome, and even back then there were a few discrepancies on how they worked on each browser. Nowadays though support is much better. Even the browser on your phone will dedicate a chunk of extra cpu muscle to making sure your 3D animations run as smoothly as they would on a desktop. The following tutorial I want to run through goes over how to create basic a 3D button and how to rotate it. This should hopefully give anyone a basic understanding of how 3D css works and how it could be applied to more complex shapes.
#1 Setting the Scene
The first stage to creating any 3D object in CSS is to create an element with the property 'perspective'. You can think of this as the 3D space in which your objects will live. The perspective property creates a z axis and defines the size of it. It accepts values in either px or em. If you imagine that a standard div is a flat 2d rectangle, perspective turns it into a 3D cube and the greater value you define in perspective, the deeper the cube.
<div class="scene"> <div class="cube"> <div class="front"> CLICK ME! </div> <div class="bottom"> FOR MORE INFO! </div> </div> </div>
.scene{
width: 300px;
height: 100px;
perspective: 800px;
}#2 The Cube
Next we create our cube, which will house each side of our button. Since the sides are child elements of our cube div, we need to add transform-style: preserve-3d; to our css.
.cube{
position: relative;
width: 300px;
height: 100px;
margin: 30px;
transform-origin: 50% 50%;
transform-style: preserve-3d;
transition: 0.4s all;
}
Transform-style allows us to specify that any child elements of .cube should also be rendered in a 3D space.
Next we add two sides to our cube. We could add all 6 sides of the cube, but it would unnecessary as we only see two sides on the cube during the animation.
Translate3d takes 3 values. The first two allow you to move an object along the x and y axis. The 3rd is the z axis. Increasing this brings an object closer to the screen and vice versa. Note though that if you specify a z value larger than your perspective value, that element will not render on screen.
.front{
position: absolute;
width: 100%;
height: 100%;
background: #f55639;
transform: rotateX(0deg) translate3d(0px,0px,50px);
}
.bottom{
position: absolute;
width: 100%;
height: 100%;
background: #d629d5;
transform: rotateX(-90deg) translate3d(0px,0px,50px);
}#3 Animation
Since all the sides of our cube are contained in one div, we don't have to animate each side individually and can just animate the parent. In many cases with 3D animations you want to have your hover effect on an element that isn't being transformed. 3D transforms can effect the detection area for hovers and cause jittering animations.
.scene:hover .cube{
transform: rotateX(90deg);
}#4 Result
This is only basic look into what can be done with 3D shapes in CSS right now, but hopefully it gives you a basic understanding of how you go and create more complex animations. Below is a finished example with a bit of extra styling.
