Join Val Head for an in-depth discussion in this video Simple 3D transforms, part of CSS: Animation.
- View Offline
- One of the more interesting things about CSS transforms is how easily they allow us to jump into 3D space. CSS 3D is more like postcards in space rather than like proper 3D models or anything like that but it's still very powerful and very useful on the web. Getting into 3D in CSS can be a simple as rotating something around the X or Y-axis. Doing that angles part of the object on the screen away from you and that gets you 3D. I'm using one of my Instagram images here to demonstrate. It's just an image sitting in our HTML page but we can still apply 3D transforms to that.
I'll open up the CSS in Sublime and add a transform rule to our image. This is our image right here. Then we'll just give it a transform of a rotation on the Y-axis of 45deg. In browsers, the Y-axis is the one that runs up and down. Kind of like this image is attached to a pole in the middle and we're just rotating it around that pole. So if we save this and preview this in our browser, the effect might not be exactly what you had in mind. It looks a bit misshapen and probably a bit rotated but it doesn't really look 3D yet.
To get 3D transforms to look right, we need to add some perspective. So we'll go back to our CSS and add it here. There are two places we can add perspective. We can add perspective here in the transform rule itself or we can add perspective to a parent element. I prefer to set this perspective on the parent element. That way if I decide to add any additional elements that rotating 3D, they'll all be using the same perspective setting. So I'm going to go up to my wrapper which happens to be the thing that contains my image and add a perspective property.
And I'm going to give it a value of 1000px. The perspective length can be set in pixels or ems and it represents the approximate distance of how far away you are from that transforming element. Lower values show more drastic effect and higher values show a flatter effect. I like to start with a 1000 because it's a pretty neutral distance in terms of CSS. So we'll save our CSS with the perspective added and go back to our page in the browser. And then we've got something that looks a lot more like a 45deg rotation in 3D space. To show you what a more drastic perspective will look like, we can go back to our CSS and change this perspective to be something like 100.
This is much lower which means they're much closer to the effect and it's going to be a lot more dramatic. We can go back and refresh our browser. This is hugely different and probably a bit excessive for what we want but that's what perspective does. So I'm going to go back and change this back to a 1000 so we can at least see our entire image. You can also rotate around both the Y and X-axis for a combined 3D effect. So we can go down to our transform and add a rotation around the X-axis of maybe 20deg and have a combined 3D rotation.
So now we have something that's rotating on both the X-axis and the Y-axis and it's just kind of floating there in 3D space. We can also move objects around in 3D space using the translate3d function. So we go back to our CSS. We can remove these rotations for now. Add a translate3d. The translate3d function takes three numbers. One for the X-axis, one for the Y-axis and one for the Z-axis. So we can move this something like 100px to the right, maybe 200px down, and then mine is 100px away from us.
The zero point on the said axis is kind of like in line with the screen. If you pick higher numbers, it gets closer to you. And if you pick lower numbers or negative numbers, it gets farther away from you. So we'll save this and go back to our browser to see what we've changed. And now our image just kind of looks like it moved down in a tiny bit smaller. Translations like this are much more visually effective when they're animated or transition. Seeing the image actually move backwards in 3D space gets the point across in a more dramatic way. This is just a short look at what transforms can do in 3D space.
For a list of all the possible transform functions and what they can do, see this page on MDN. It goes into a lot of detail on exactly what's happening behind the scenes for all the transform functions. In the next video, we'll start applying some CSS transitions to get some animation going on these transforms.
Web designer Val Head introduces CSS transforms and transitions—the foundation of most CSS animations—and shows how to keyframe simple animations and adjust their timing, fill, and direction. She also covers looping and chaining animations, animating HTML and SVG elements, and optimizing animation performance, and introduces the best tools and use cases for CSS animation. Start watching to get your brand in motion.
- Using CSS transforms and transitions
- Working with animation-delay and animation-fill-mode
- Timing and easing CSS animations
- Animating elements in place
- Animating sprite images
- Animating CSS transforms and transitions
- Chaining multiple animations
- Animating SVG images
- Creating high-performance CSS animations