Simple 3D transforms

- One of the more interesting things about CSS transforms ishow easily they allow us to jump into 3D space.CSS 3D is more like postcards in spacerather than like proper 3D models or anything like thatbut it's still very powerful and very useful on the web.Getting into 3D in CSS can be a simple as rotating somethingaround the X or Y-axis.Doing that angles part of the objecton 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 pagebut we can still apply 3D transforms to that.

I'll open up the CSS in Sublimeand add a transform rule to our image.This is our image right here.Then we'll just give it a transformof 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 polein 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 rotatedbut 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 itselfor 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 elementsthat rotating 3D, they'll all be usingthe same perspective setting.So I'm going to go up to my wrapperwhich happens to be the thing that contains my imageand add a perspective property.

And I'm going to give it a value of 1000px.The perspective length can be set in pixels or emsand it represents the approximate distanceof how far away you are from that transforming element.Lower values show more drastic effectand higher values show a flatter effect.I like to start with a 1000because it's a pretty neutral distance in terms of CSS.So we'll save our CSS with the perspective addedand go back to our page in the browser.And then we've got something that looks a lot morelike 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 perspectiveto be something like 100.

This is much lower which means they're much closerto 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 excessivefor what we want but that's what perspective does.So I'm going to go back and change this back to a 1000so we can at least see our entire image.You can also rotate around both the Y and X-axisfor a combined 3D effect.So we can go down to our transform and add a rotationaround the X-axis of maybe 20degand have a combined 3D rotation.

So now we have something that's rotatingon both the X-axis and the Y-axisand it's just kind of floating there in 3D space.We can also move objects around in 3D spaceusing 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-axisand 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 iskind 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 browserto see what we've changed.And now our image just kind of looks like it moved downin a tiny bit smaller.Translations like this are much more visually effectivewhen they're animated or transition.Seeing the image actually move backwards in 3D spacegets the point across in a more dramatic way.This is just a short lookat what transforms can do in 3D space.

For a list of all the possible transform functionsand what they can do, see this page on MDN.It goes into a lot of detail on exactly what's happeningbehind the scenes for all the transform functions.In the next video, we'll start applying some CSS transitionsto get some animation going on these transforms.

Resume Transcript Auto-Scroll

Author

Released

1/21/2016

CSS animation offers a whole new way to bring motion to interactive projects. It's a core skill for web designers and developers and a feature users have come to expect from modern websites. This course presents a series of basic CSS animation projects: site features such as rollover buttons, 3D transforms, animated graphics and logos, load screens, and more.

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.