You are on page 1of 12

Adventures In

Transforms

e

ird Dimension: CSS 3D

By Peter Gasston
CSS,

CSS3

27 Comments

January 6th, 2012

with

Back in 2009, the WebKit development team proposed a new extension to CSS
that would allow Web page elements to be displayed and transformed on a
three-dimensional plane. is proposal was called 3D Transforms, and it was
soon implemented in Safari for Mac and iOS. About a year later, support
followed for Chrome, and early in 2011, for Android. Outside of WebKit,
however, none of the other browser makers seemed to show much
enthusiasm for it, so it’s remained a fairly niche and underused feature.
That’s set to change, though, as the Firefox and Internet Explorer teams have decided to join
the party by implementing 3D Transforms in pre-release versions of their browsers. So, if all
goes according to plan, we’ll see them in IE 10 and a near-future version of Firefox (possibly 10
or 11, but that’s not confirmed yet), both of which are slated for release sometime this year.
That being the case, this is an ideal time to get ahead of the curve and start learning about the
possibilities and potential of adding an extra dimension to your Web pages. This article aims to
help you do just that, by taking you on a flying tour of the 3D Transforms syntax.
Please bear in mind that in order to see the examples in this article, you’ll need a browser that
supports 3D Transforms; as I write this, that’s Safari, Chrome, IE 10 Platform Preview1 or Firefox
Aurora2 .

The third dimension is known as the z-axis and. we move elements around horizontally and vertically. If you already know about working in three dimensions or remember using axes in math class at school. not the plural of axe). and we move them around the screen horizontally (left to right) and vertically (top to bottom). we’re accustomed to working in two dimensions: all elements have width and height.e. can be thought of as towards or away from you. If we think of the top-left corner of an element as our origin (i. and adding movement towards and away from you (the viewer). and the vertical line is the y-axis. and a move to the right is a positive movement along the x-axis. The move to a third dimension can be thought of as adding depth to elements. For everyone else. Each of these directions is called an axis: the horizontal line is known as the x-axis. you can skip the next section. the point from which movement is measured). The same goes for moving an element up (negative on the y-axis) and down (positive on the y-axis). here is… A Quick Primer On Axes I just mentioned that on the 2-D Web. a movement to the left is a negative movement along the x-axis.e ird Dimension On the Web. a negative movement along the z-axis is away from you. as I said. you’ll need to know about axes (that’s the plural of axis. . To use 3D Transforms in CSS. Think about 3D films in which objects are constantly thrust out of the screen towards you in an attempt to demonstrate the possibilities of the extra depth. and a positive movement is towards you.

y (up-down) and z (away-towards). For the sake of clarity. If you’ve read all of this talk of axes and negative movements and you’re rubbing your eyes and blinking in disbelief and misunderstanding. Come back and read this again after a few examples and it should all be clear. -ms-transform: foo. } Note that Opera doesn’t currently have an implementation of 3D Transforms. the same property that’s used for 2-D CSS Transforms. -o-transform: foo. but I’m including it here because work is apparently underway. so remember to use all of the browser prefixes. -webkit-transform: foo. At the moment. like so: div { -moz-transform: foo. this property is still considered experimental.Showing the three axes: x (left-right). I’ll use only non-prefixed properties. in the examples throughout this article. . Transformation Functions The various transformations are all applied with a single CSS property: transform — yes. but remember to include all of the prefixed ones in your own code. don’t worry: it will all become clear when you get stuck in the code.

By taking the top corners in your fingers. you’ll see the transformations removed (I’ve used this convention in all of the examples in this article). So. the same). I’ll have to ask you to do a little mental exercise (which will come in useful later in the article. translate3d Now. then you’ll already know many of these functions because they are quite similar (or. in some cases. scaleY. rotateY() and rotateZ() take a deg (i. If you’ve used 2-D CSS Transforms. R O TAT I O N To explain what this does. degree) value and move the element around its point of origin (where the string passes through it) by that much. left and right. This is what the rotate() function does. Here are all of the 3D functions: matrix3d perspective rotateX. the transform property accepts a range of functions as values. you can move the card up and down. translateY. and if you mouse over each. too). The semi-translucent red box shows the original position of the element. Here we’ve rotated each of the elements 45° around a different axis (in order: x. each of which applies a different transformation. pivoting around the string. rotateY. rotate3d scaleX.e. scale3d translateX. . rotateZ. but it’s so unbelievably complex (it takes 16 values!) that there’s no way I could cover it in this article. scaleZ. so you can see the effect of each. Imagine a sheet of card with a string running through the middle that fixes it in place. z). matrix3d definitely sounds the coolest. Have a look at our first example3 (a screenshot is shown below in case you don’t have access to a supported browser). translateZ. and forwards and backwards. y. The individual functions rotateX().Anyway. let’s put that aside and take a quick look at the others.

y (center) and z (right). so we’ll skip it. which takes three values in order. y (center) and z (right). which moves the element by that distance along the given axis. one for each axis. z). translate3d(). . z). we’ve translated each of the elements by -20 pixels along a different axis (in order: x. In our second example5 . 6 Each element is translated by -20 pixels along a different axis: x (left). and translateZ(-10px) would move the element 10 pixels away from the viewer. translateX(2em) would move the element 2 ems to the right.4 Each element is rotated 45° around a different axis: x (left). y. y. So.” The functions translateX(). There is a rotate3d() function as well. There’s also a shorthand function. like so: translate3d(x. translateY() and translateZ() each take a length value. T R A N S L AT I O N This is really just a fancy way of saying “movement. but it’s too complex to explain in a brief article like this one.

any value below 200px.z).75). applying both translateZ(10px) and scaleZ(2) would translate an element 20 pixels along the z-axis. For scaleX() and scaleY(). which. what we’re doing is more like moving a 2-D object around in 3D space. So.e1 { transform: scaleX(1. The three functions scaleX(). the value given to scaleZ() acts as a multiplier for the translateZ() function that I explained in the last section. one for each of the individual functions: scale3d(x.Note that translation of an element is similar to relative positioning. scale3d(). The scaleZ() function behaves slightly differently. this is applied directly to the width and height.75). } PERSPECTIVE The perspective() function is quite simple. but what it actually does is quite complex. the length is like a distance between you and the object that you’re viewing (a tutorial on Eleqtriq7 has a more technical explanation and diagram).y. which is used as a multiplier. you just need to know that the lower the number. Explaining this is a little complicated. for example.5. meaning it might cover or show through surrounding elements.5. and any value of 1000px or more will seem to have no effect at all.e2 { transform: scale3d(1. applying scaleY(1. like translate3d(). Instead.5) scaleY(1. the same transformation applies to both of the elements: . The translated element will keep its position in the flow and will only appear to have moved. For our purposes.1.75) to an element with a width of 100 pixels would transform it to 75 pixels wide. for example. in the following code example. in that it doesn’t affect the document’s flow.5) to an element with a height of 100 pixels would transform it to 150 pixels high. The function takes a single value. So. } . Transformed elements don’t actually have any depth to increase or decrease.0. will make the transformation appear very exaggerated. . There’s also a shorthand property. scaleY() and scaleZ() each take a unitless number value. SCALING This just means making bigger or smaller. the more extreme the 3D effect will appear. takes three values. and applying scaleX(0. which is a length unit greater than 0 (zero).5) scaleZ(0.

Our fourth example10 clearly illustrates the difference. Other Properties In addition to transform. 50px and 200px. each with a different value for the perspective() function: 25px. TRANSFORM-STYLE If you’ll be applying 3D transformations to the children of an already transformed element. you’ll need to know about a few other important properties. . it’s even clearer when you mouse over to see the transformations removed. without it. and on the right. the element on the left has the flat value. Although the difference between the three is very discernible. 9 Each element has a different value for the perspective() function: 25px (left). respectively. then you’ll need to use this property with the value preserve-3d (the alternative. Note that I’ve transformed the parent elements (equally) so that we can see the degree of perspective more clearly. they would appear flat in front of their parent. we have three transformed elements. and default. sometimes the difference in perspective values can be imperceptible. preserve-3d. 50px (center) and 200px (right).In our third example8 . is flat). This means that the child elements will appear on their own planes.

11 The element on the left has a transform-style value of flat. TRANSFORM-ORIGIN As mentioned. . this would also force the children into appearing on the same plane. right. and the one on the right has a value of preserve-3d. the change is applied around a point directly in the horizontal and vertical middle — like the imaginary piece of string we saw in the earlier illustration. Acceptable values are pairs of lengths. etc.). you can change this to any point in the element. each of which has a different transform-origin value. } In our fifth example12 . the parent must not have an overflow value of hidden. For example: div { transform-origin: right top. you can see the same transformations applied to two elements. Using transform-origin. percentages or positional keywords ( top. Something else to note is that if you are transforming child elements. when you apply a transformation to an element.

not the element itself. The effect of changing the origin will be more pronounced the lower the perspective value is. and the one on the right has a value of right top. The perspective-origin property changes the angle from which you view the element that’s being transformed. B AC K FAC E -V I S I B I L I T Y Depending on which transformation functions you apply. The difference is clearly visible. PERSPECTIVE AND PERSPECTIVE-ORIGIN We introduced the perspective() function earlier. but if you use backface-visibility with a value of hidden. you’ll see nothing instead. not even a background color. the default behavior is for the element to be shown in reverse. sometimes you will move an element around until its front (or “face”) is angled away from you. Like transform-origin. Conclusion . the difference is that the property applies only to the children of the element that it’s used on.13 The element on the left has a transform-origin value of center center. but the perspective property takes the same values. but even more obvious if you pass the mouse over to see the transformation removed. percentages or positional keywords. it accepts lengths. and the default position is the horizontal and vertical middle. When this happens.

we’ve flown through the intricacies of the 3D transformations syntax. Westciv This tool lets you play around with different transformation values and shows you the result in real time.” W3C The CSS 3D Transforms module is the full specification. But please. compare the list of “More adventures” on The Feed14 website that I built last year in a browser that supports 3D transforms and in one that doesn’t. be responsible: not everything on the Web needs to be in three dimensions! FURTHER READING AND RESOURCES The Bright (Near) Future of CSS15 Eric Meyer’s comprehensive article on CSS3. Support of CSS Transforms: A Reference Table16 A great reference for the current state of support of CSS Transforms in browsers. Peter Gasston My book contains much more detail about all of the functions that I’ve covered in this article. you can implement these properties in your own designs right now. but experimentation will soon make them clear to you in practice.By necessity. If you don’t believe me. (al) . covering CSS3 3D Transforms as well. as well as the ones I had to leave out. “20 Stunning Examples of CSS 3D Transforms19 . With a certain amount of care for older browser versions. 3D Transforms17 . so get ahold of a browser that supports them and start making some cool stuff. “CSS3 3D Transforms18 .” Paul Hayes See what you can build when you master 3D Transforms. but hopefully I’ve whetted your appetite to try it out yourself. although it is very dry and technical. Some of the concepts used in 3D transforms can be quite daunting. and you’ll see what I mean. The Book of CSS320 .

smashingmagazine.caniuse.com/smashingmag-3d/example4.smashingmagazine.smashingmagazine.com/2011/02/11/the-bright-near-future-of-css/ 16 http://www.html 14 http://thefeed.smashingmagazine.com/smashingmag-3d/example3.smashingmagazine.html 7 http://www.com/smashingmag-3d/example1.FOOTNOTES 1 http://ie.mozilla.html 11 http://provide.com/smashingmag-3d/example5.smashingmagazine.com/smashingmag-3d/example1.com/features/20-stunning-examples-css-3d-transforms 20 http://thebookofcss3.com/smashingmag-3d/example4.com/#feat=transforms2d 17 http://westciv.com/smashingmag-3d/example5.w3.smashingmagazine.com/tools/3Dtransforms/ 18 http://www.html 9 http://provide.com/smashingmag-3d/example2.com Hold on. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona. with smart design patterns and front-end techniques.html 6 http://provide.html 12 http://provide.html 5 http://provide.microsoft.org/TR/css3-3d-transforms/ 19 http://www.org/firefox/channel/ 3 http://provide.com/smashingmag-3d/example3.netmagazine.orange. Tiger! Thank you for reading the article.smashingmagazine.com/2010/05/understanding-css-3d-transforms/ 8 http://provide.uk/ 15 https://www.html 4 http://provide.com/smashingmag-3d/example2.smashingmagazine.smashingmagazine.eleqtriq. .smashingmagazine.com/testdrive/Info/Downloads/Default. on October 25–26.html 2 http://www.html 13 http://provide.co.html 10 http://provide.

com . and author of The Book of CSS3 and The Modern Web. England. http://www.smashingmagazine.Peter Gasston Peter is a front-end technologist. writer. He lives in London. Made in Germany. speaker. Founded by Vitaly Friedman and Sven Lennartz. 2006-2012. With a commitment to quality content for the design community. He blogs at Broken Links and tweets as @stopsatgreen. developer.