The transform
property allows you to visually transform an element in twodimensional or threedimensional space.
Using transform
, elements can be translated, rotated and/or scaled in two or three dimensional space.
More specifically, the transform
property transforms the coordinate system of an element, thus resulting in the element’s transformation in space.
The transform
property takes as a value a list of transform functions (see Values section below) or none
. The coordinate system of the transformed element is transformed by a final transformation value that is obtained by converting each function in the list to its corresponding matrix, and then multiplying those matrices.
Any value for transform
other than none
results in the creation of both a stacking context and a containing block. This means that the transformed element acts as a containing block for fixed positioned descendants.
The transformation matrix that is used to apply the transformations to an element is also affected by the value of the transformorigin
property which, as its name suggests, is used to specify the origin of the transformations—that origin is the origin of the element’s coordinate system at the time of transformation.
The Coordinate System
Every element in CSS has a coordinate system whose origin is at the top left corner of the element—this is known as the initial coordinate system.
When you use transform
, the origin of the coordinate system is moved to the center of the element. This is because the transformorigin
property’s default value is 50% 50%
, which translates the origin to the center of the element. After that, all transformations are applied to the element based on the new position of the coordinate system.
You can specify where you want to move the origin using the transformorigin
property, if you don’t want the origin to be moved to the center. Different transform origins are useful depending on the transformation effect you want. See the transformorigin
property entry for more examples and use cases.
If you rotate or skew the element using the transform
property, you transform and/or skew its entire coordinate system along with it, and all consequent transformations will be applied based on the new coordinate system’s transformation. This is why the order of transformations is very important—different orders will result in different transformations. This makes sense considering that the transformations are translated into matrices, and multiplying two matrices in mathematics will give different results depending on the order of these matrices. For example, a x b will not result in the same result as b x a (unless one of them is the identity matrix).
For example, if you want to translate an element and rotate it in its new position, you should do it in the mentioned order: translate and then rotate. If you were to rotate an element first, then its coordinate system will be rotated too, and then translating in a certain direction may not result in the result you’d expect. If you were to rotate an element by 90 degrees around the yaxis, for example, then its xaxis will point towards the inside of the screen, away from you, so if you apply a translation then along the xaxis, the element will not move to the right, it will move inwards away from you. So, it is important to look out for the order in which you write the transform functions in the transform
property—the first function will be applied first, and the last function will be applied last. It helps to visualize the coordinate system in your mind all the time to make sure you’re not missing this point.
Trivia & Notes
Transformations applied to an element do affect the visual rendering, but have no effect on the CSS layout other than affecting overflow. This means that whatever space the element takes up before you transform it, it will still take up after you transform it, and the transformations will have no effect on how the elements around the transformed element flow. The transform
property does not affect the flow of the content surrounding the transformed element. However, the extent of the overflow area takes into account transformed elements. This behavior is similar to what happens when elements are offset via relative positioning. Therefore, if the value of the overflow
property is scroll
or auto
, scrollbars will appear as needed to see content that is transformed outside the visible area.
While some values of the transform
property allow an element to be transformed in a threedimensional coordinate system, the elements themselves are not threedimensional objects. Instead, they exist on a twodimensional plane (a flat surface) and have no depth.
When an element is transformed, a value of fixed
for the backgroundattachment
property is treated as if it had a value of scroll
. The computed value of backgroundattachment
is not affected.
In addition to the transformorigin
property’s role in CSS transforms, the perspective
and perspectiveorigin
properties can be used to add a feeling of depth to a scene, and the transformstyle
property is used to preserve the threedimensional space in an element; this is useful when you’re nesting CSS transforms. All these properties are usually used in conjunction with each other to create CSS transformations in two or three dimensions. You can read more about each of these properties in their respective entries.
Official Syntax

Syntax:
transform: none  <transformlist>
 Initial: none
 Applies To: transformable elements
 Animatable: yes
Notes
A <transformlist>
is a list of one or more transform functions. These functions are described in the Values section below.
Values
You can apply a transformation to an element using one of the following transform
property values:
translate()
translateX()
translateY()
scale()
scaleX()
scaleY()
rotate()
skew()
skewX
skewY
matrix()
translateZ
translate3d()
scaleZ()
scale3d()
rotateX()
rotateY()
rotateZ()
rotate3d()
matrix3d()
perspective()
Some of these functions are used to apply twodimensional transformations, others are used to apply threedimensional transformations.
2D Transform Functions:
 translate()

transform: translate( tx [, ty ]? ); /* the question mark indicates the second value is optional */
The
translate()
function is used to translate the element by a vector [tx, ty], where tx is the translation along the xaxis, and ty is the translation along the yaxis. If ty is not provided, it is considered zero and the element is translated along the xaxis only. The values tx and ty are provided either as a<length>
or as apercentage
. Not including a unit type will cause the number to be interpreted as a “user unit”.Positive translation values will move the element along the positive direction of the axis, and negative values will move it in the opposite direction.
Examples:
transform: translate(100px); /* translates the element by 100px on the xaxis */ transform: translate(100px); /* translates the element by 100px on the xaxis */ transform: translate(50px, 300px); /* translates the element 50px to the right and 300px downwards */ transform: translate(50%, 10%); /* translates the element by 50% of its width to the left, and 10% of its height to the bottom */ transform: translate(100%); /* translates the element 100% to the left */ transform: translate(100px, 100px); /* see the result in the following image */
The result of applying a translation to an element:
 translateX()

transform: translateX(tx);
The
translateX()
function is used to translate an element by the given amount along the xaxis. The value tx is provided either as a<length>
or as apercentage
. Not including a unit type will cause the number to be interpreted as a “user unit”.Positive translation values will move the element along the positive direction of the xaxis, and negative values will move it in the opposite direction.
Examples:
transform: translateX(300px); transform: translateX(50%); transform: translateX(150%);
 translateY()

transform: translateY(ty);
The
translateY()
function is used to translate an element by the given amount along the xaxis. The value ty is provided either as a<length>
or as apercentage
. Not including a unit type will cause the number to be interpreted as a “user unit”.Positive translation values will move the element along the positive direction of the yaxis, and negative values will move it in the opposite direction.
Examples:
transform: translateY(300px); transform: translateY(50%); transform: translateY(150%);
 scale()

transform: scale(<number> [, <number>]?); /* the question mark indicates the second value is optional */
The
scale()
function is used to scale an element up or down, making it appear bigger or smaller. It takes one or two unitless<number>
s as a value, sx and sy, where sx will scale the element in the direction of the xaxis, and sy will scale it in the direction of the yaxis direction. If only one value (sx) is provided, the second one (sy) is assumed to be equal to the first one.If the value provided is greater than one, the element is scaled up—it will look bigger in the corresponding direction. If the value is equal to one, the element stays unchanged (in the corresponding direction). If the value is between zero and one exclusively, the element is scaled down. If the value is zero, the element disappears. Negative values are allowed, but they don’t scale the element. In fact, they cause the transformed element to be flipped in either direction!
Examples:
transform: scale(1, 1); /* element is unchanged */ transform: scale(2, 2); /* element looks twice as its original size */ transform: scale(1, 2); /* element is scaled only vertically by double its vertical size, and its horizontal size is unchanged. Similar effect to that of scaleY(2) (see next value) */ transform: scale(2, 1); /* element is scaled only horizontally by double its horizontal size, and its vertical size is unchanged. Similar effect to that of scaleX(2) (see next value) */ transform: scale(3); /* scales element to 3 times its size */ transform: scale(0.5); /* element is scaled to look half its size */ transform: scale(0); /* element is scaled out so that it disappears */ transform: scale(1); /* will flip the element in both directions */
The following image shows the result of applying different
scale()
transformations to an image. The first one on the left is the image with no transformation. The second one is the result of applyingtransform: scale(2);
, the third one is the result of applyingtransform: scale(0.5)
, and the fourth one is the result of applyingtransform: scale(0.5, 1.5);
. Notice how the images overlap each other because the transformation on each one does not affect the flow of content around it.The following image is the result of applying
scale()
(and its two variations) with a negative value on an image:  scaleX()

transform: scaleX(<number>);
The
scaleX()
function is used to scale an element up or down, making it appear bigger or smaller, in the direction of the xaxis. It takes a unitless<number>
sx as a value, which is used to scale the element’s size along the xaxis.If the value provided is greater than one, the element is scaled up—it will look bigger along the xaxis. If the value is equal to one, the element stays unchanged in that direction. If the value is between zero and one exclusively, the element is scaled down along the xaxis. If the value is zero, the element disappears. Negative values are allowed, but they don’t scale the element. In fact, they cause the transformed element to be flipped horizontally (as if it were rotated along the yaxis)!
Examples:
transform: scaleX(2); /* scales the element to twice its size along the xaxis */ transform: scaleX(1); /* element is unchanged */ transform: scaleX(0.25); /* scales the element along the xaxis to quarter its size */ transform: scaleX(1); /* flips the element along the xaxis */
See the
scale()
value above to see how a negative value flips an element when applied usingscaleX()
.  scaleY()

transform: scaleY(<number>);
The
scaleY()
function is used to scale an element up or down, making it appear bigger or smaller, in the direction of the yaxis. It takes a unitless<number>
sy as a value, which is used to scale the element’s size along the yaxis.If the value provided is greater than one, the element is scaled up—it will look bigger along the yaxis. If the value is equal to one, the element stays unchanged in that direction. If the value is between zero and one exclusively, the element is scaled down along the yaxis. If the value is zero, the element disappears. Negative values are allowed, but they don’t scale the element. In fact, they cause the transformed element to be flipped vertically (as if it were rotated along the xaxis)!
Examples:
transform: scaleY(2); /* scales the element to twice its size along the yaxis */ transform: scaleY(1); /* element is unchanged */ transform: scaleY(0.25); /* scales the element along the yaxis to quarter its size */ transform: scaleY(1); /* flips the element along the yaxis */
See the
scale()
value above to see how a negative value flips an element when applied usingscaleY()
.  rotate()

transform: rotate(<angle>);
The
rotate()
function is used to rotate an element in the twodimensional space. The element is rotated by an angle which is passed to the function as an<angle>
value. The element is rotated about the origin as defined by thetransformorigin
property.A positive value will rotate the element in the clockwise direction. A negative value will rotate it in the counterclockwise direction.
Examples:
transform: rotate(45deg); transform: rotate(60deg); transform: rotate(1.5rad); transform: rotate(1turn);
The following image shows the result of applying a positive and then a negative rotation value to an image. Notice how the images overlap each other because the transformation on each one does not affect the flow of content around it.
 skew()

transform: skew(<angle> [, <angle>]?);
The
skew()
function is used to skew an element. Skewing an element is like applying a tilting effect on it. It is like grabbing two opposite vertices of a rectangle and then pulling them in opposite directions, turning the rectangle into a parallelogram.It takes either one or two arguments: ax and ay. Both are
angle
values. The first value (ax) skews the element along the xaxis, and the second argument (ay) skews it along the yaxis. Skewing along the xaxis is like pulling the rectangle angles to the sides, and skewing along the yaxis is like pulling them vertically in opposite directions. The two angle values determine the amount by which the element is skewed. If the second value is not provided, it is assumed to be zero.The skew() function was present in early drafts. It has been removed but is still present in some implementations. *Do not use it*. In order to skew an element in either direction, use the
skewX()
andskewY()
functions listed below. Also note that the behavior ofskew()
is different from multiplyingskewX()
withskewY()
.  skewX()

transform: skewX(<angle>);
The
skewX()
function is used to skew an element. Skewing an element is like applying a tilting effect on it. In the case ofskewX()
, it is like grabbing two opposite vertices of a rectangle and then pulling them along the xaxis in opposite directions, turning the rectangle into a parallelogram.It takes an
angle
ax as a value. The element is skewed by the value of the angle. You can imagine two opposite vertices (say the upper left and bottom right, for example) being pulled in opposite directions (the upper left pulled to the left and the bottom right to the right) until the inner value of these vertices becomes 90deg – ax.If the angle value is positive, the upper left and bottom right corners of the rectangle are “pulled”. If the value is negative, the upper right and bottom left angles are pulled. An angle value of 90deg (or 90deg) will make the element disappear. A value of 180deg (or 180deg) will leave it unchanged.
Examples:
transform: skewX(30deg); transform: skewX(30deg); transform: skewX(0.5rad); transform: skewX(1turn); transform: skewX(90deg);
The following image shows the result of applying
skewX()
to an image using a positive angle and then a negative angle of the same value.Remember that skewing an element will also skew its coordinate system with it. Therefore, after applying a skew transformation to your element, you need to be aware that you’re not left with an orthogonal coordinate system anymore. When the coordinate system is skewed, consequent transformations may result in unexpected results if you don’t calculate them based on the new coordinate system. You can read more about coordinate systems in CSS and SVG here.
 skewY()

transform: skewY(<angle>);
The
skewY()
function is used to skew an element. Skewing an element is like applying a tilting effect on it. In the case ofskewY()
, it is like grabbing two opposite vertices of a rectangle and then pulling them along the yaxis in opposite directions, turning the rectangle into a parallelogram.It takes an
angle
ay as a value. The element is skewed by the value of the angle. You can imagine two opposite vertices (say the upper left and bottom right, for example) being pulled in opposite directions (the upper left pulled up and the bottom right to the bottom) until the inner value of these vertices becomes 90deg – ax.If the angle value is positive, the upper left and bottom right corners of the rectangle are “pulled”. If the value is negative, the upper right and bottom left angles are pulled. An angle value of 90deg (or 90deg) will make the element disappear. A value of 180deg (or 180deg) will leave it unchanged.
Examples:
transform: skewY(30deg); transform: skewY(30deg); transform: skewY(0.5rad); transform: skewY(1turn); transform: skewY(90deg);
The following image shows the result of applying
skewY()
to an image using a positive angle and then a negative angle of the same value.Remember that skewing an element will also skew its coordinate system with it. Therefore, after applying a skew transformation to your element, you need to be aware that you’re not left with an orthogonal coordinate system anymore. When the coordinate system is skewed, consequent transformations may result in unexpected results if you don’t calculate them based on the new coordinate system. You can read more about coordinate systems in CSS and SVG here.
 matrix()

transform: matrix( <number> [, <number> ]{5,5} )
The
matrix()
function is used to specify a twodimensional transformation matrix. It can be used to combine several transformations into one. For example, instead of using two (or more) transform functions (see above) in one declaration like so:transform: rotate(45deg) translate(24px,25px);
Using the
matrix()
function, we can combine these two transformations into one matrix:transform: matrix(0.7071067811865476, 0.7071067811865475, 0.7071067811865475, 0.7071067811865476, 0.7071067811865426, 34.648232278140824);
As you can see, calculating the values of the
matrix()
function wouldn’t be easy if you’re not mathsavvy. These calculations were also probably not meant to be done by hand. Luckily, Eric Meyer and Aaron Gustafson created a very useful tool which can do the calculations for you—all you do is enter the transformations you want and the click the red button for the tool to generate the equivalentmatrix()
function for you.
3D Transform Functions:
In addition to the twodimensional transformation functions, you can apply threedimensional transformations using the threedimensional variations of the twodimensional functions.
 translateZ()

transform: translateZ(tz);
The
translateZ()
function is used to translate an element by the given amount along the zaxis. The value tz is provided as a<length>
(percentages are not valid here). Not including a unit type will cause the number to be interpreted as a “user unit”.Positive translation values will move the element along the positive direction of the zaxis, and negative values will move it in the opposite direction.
Examples:
transform: translateZ(300px); transform: translateZ(5em); transform: translateZ(4vh);
 translate3d()

transform: translate3d( tx , ty, tz);
The
translate3d()
function is the threedimensional equivalent of thetranslate()
function. It is used to translate the element by a vector [tx, ty, tz], where tx is the translation along the xaxis, ty is the translation along the yaxis, and tz is the translation along the zaxis. The values tx and ty are provided either as a<length>
or as apercentage
. The tx value needs to be a<length>
and cannot be defined as percentage. Not including a unit type will cause the number to be interpreted as a “user unit”.Positive translation values will move the element along the positive direction of the axis, and negative values will move it in the opposite direction.
Examples:
transform: translate3d(100px, 100px, 200px); transform: translate3d(50%, 100%, 1em); transform: translate3d(100px, 30px, 5vw);
 scaleZ()

transform: scaleZ(<number>);
The
scaleZ()
is used to scale an element in the third dimension, along the zaxis. It takes a unitless<number>
sz as a value, which is used to scale the element’s size in the corresponding direction.Examples:
transform: scaleZ(2); transform: scaleZ(1); /* element is unchanged */ transform: scaleZ(0.25); transform: scaleZ(1);
Since all elements in CSS are twodimensional, you might wonder how the
scaleZ()
would actually scale the element if an element in CSS does not have a “thickness”.As a matter of fact,
scaleZ()
actually scales the element along the zaxis. Practically, it’s kind of like the zaxis itself is scaled, and then the position of the element on the zaxis will automatically be affected by the scale operation on the axis.The effect of
scaleZ
is more obvious when you have an element with aperspective
set, and that is rotated in threedimensional space, or translated along the zaxis. So, we’ll go over a couple of examples.In the first example, we have two elements that are positioned in threedimensional space, and are translated along the zaxis using the
translateZ()
function. Both elements are translated by the same distance. Then, we’re going to scale the second element (the one on the right) usingscaleZ(2)
. The following image shows the result of applying these transformations and the difference between the two elements after scaling the second one withscaleZ
. Notice how the second element looks bigger, because its position on the zaxis has been scaled as the zaxis is scaled—it looks closer to you and hence bigger, but the actual dimensions (width and height) are unchanged.Another example where you can see the effect of
scaleZ
is when two elements are also transformed the same way, except that instead of translating them in threedimensional space, they are rotated about the xaxis usingrotateX
. The second element (on the right) has been scaled along the zaxis using thescaleZ()
function. Notice how it looks closer to you and thus bigger.Note that you have to keep the same order of transformations between the two elements to actually see the effect of
scaleZ
because, as mentioned earlier, the order of transformations matters and different orders will result in different transformations.  scale3d()

transform: scale3d(<number>, <number>, <number>);
The
scale3d()
function is the threedimensional equivalent of thescale()
function. It is used to scale an element up or down, making it appear bigger or smaller. It takes three unitless<number>
s as a value, sx, sy, and sz, where sx will scale the element in the direction of the xasix, sy will scale it in the direction of the yaxis, and sz will scale it in the direction of the zaxis.If the value provided is greater than one, the element is scaled up and it will look bigger in the corresponding direction. If the value is equal to one, the element stays unchanged (in the corresponding direction). If the value is between zero and one exclusively, the element is scaled down. If the value is zero, the element disappears. Negative values are allowed, but they don’t scale the element. In fact, negative sx and sy values cause the transformed element to be flipped in either direction! See the
scale()
section above for examples.Examples:
transform: scale3d(1, 1, 1); /* element is unchanged */ transform: scale3d(2, 2, 2); /* element looks twice as its original size */ transform: scale3d(1, 2, 0); transform: scale3d(2, 1, 3); transform: scale3d(1, 1, 1);
 rotate3d()

transform: rotate3d( <number> , <number> , <number> , <angle> );
The
rotate3d()
function is the threedimensional equivalent of therotate()
function. It is used to rotate an element in threedimensional space. The element is rotated by an<angle>
which is passed in as the fourth parameter of the function. The first three parameters specify the rotation direction, and together they form a direction vector [x, y, z] which is used to apply the rotation in the specified direction.A positive angle value will rotate the element in the clockwise direction along the corresponding axis, and a negative value will rotate it in the counterclockwise direction along that axis.
The clockwise direction is determined by looking at the vector starting from the end of the vector (where the pointing arrow usually is) towards the origin. The following image shows the positive (clockwise) direction of rotation along the three axes:
The first three parameters of
rotate3d()
will specify the direction vector along which the rotation will happen, and the angle will specify the direction: clockwise along the vector or counterclockwise.Examples:
transform: rotate3d(1, 1, 2, 45deg); transform: rotate3d(2, 1, 3, 33deg); transform: rotate3d(1, 0, 0, 45deg); /* element is rotated clockwise along the xaxis by 45deg */ transform: rotate3d(0, 1, 0, 45deg); /* element is rotated clockwise along the yaxis by 45deg */ transform: rotate3d(0, 0, 1, 45deg); /* element is rotated clockwise along the zaxis by 45deg */ transform: rotate3d(0, 0, 0, 50deg); /* NO ROTATION IS APPLIED */
The following image shows the result of applying
rotate3d(1, 1, 1, 50deg);
to an image:  rotateX()

transform: rotateX(<angle>);
The
rotateX()
function is used to rotate an element about the xaxis in threedimensional space. It is equivalent to:transform: rotate3d(1, 0, 0, <angle>);
Where
rotate3d()
is the transformation function used to rotate an element in threedimensional space.It takes an
<angle>
as a value. The element is rotated then by the specified value about the xaxis. If the value is positive, the element is rotated in a clockwise direction, if it is negative it is rotated in a counterclockwise direction. The clockwise direction is determined by looking at the xaxis starting from the end (where the pointing arrow usually is) towards the origin. See therotate3d()
section above for a visual representation of the clockwise direction along the xaxis.Examples:
transform: rotateX(30deg); transform: rotateX(135deg); transform: rotateX(90deg);
The following image shows the result of applying
rotateX(50deg)
androtateX(50deg)
on an image:  rotateY()

transform: rotateY(<angle>);
The
rotateY()
function is used to rotate an element about the yaxis in threedimensional space. It is equivalent to:transform: rotate3d(0, 1, 0, <angle>);
Where
rotate3d()
is the transformation function used to rotate an element in threedimensional space.It takes an
<angle>
as a value. The element is rotated then by the specified value about the yaxis. If the value is positive, the element is rotated in a clockwise direction, if it is negative it is rotated in a counterclockwise direction. The clockwise direction is determined by looking at the xaxis starting from the end (where the pointing arrow usually is) towards the origin. See therotate3d()
section above for a visual representation of the clockwise direction along the xaxis.Examples:
transform: rotateY(30deg); transform: rotateY(135deg); transform: rotateY(90deg);
The following image shows the result of applying
rotateY(50deg)
androtateY(50deg)
on an image:  rotateZ()

transform: rotateZ(<angle>);
The
rotateZ()
function is used to rotate an element about the zaxis in threedimensional space. It is equivalent to:transform: rotate3d(0, 0, 1, <angle>);
Where
rotate3d()
is the transformation function used to rotate an element in threedimensional space.It takes an
<angle>
as a value. The element is rotated then by the specified value about the zaxis. If the value is positive, the element is rotated in a clockwise direction, if it is negative it is rotated in a counterclockwise direction. The clockwise direction is determined by looking at the xaxis starting from the end (where the pointing arrow usually is) towards the origin. See therotate3d()
section above for a visual representation of the clockwise direction along the xaxis.Examples:
transform: rotateZ(30deg); transform: rotateZ(135deg); transform: rotateZ(90deg);
The following image shows the result of applying
rotateZ(50deg)
androtateZ(50deg)
on an image:  matrix3d()

transform: matrix3d( <number> [, <number> ]{15,15} );
The
matrix3d()
function is the threedimensional equivalent of thematrix()
function. Just like thematrix()
function,matrix3d()
is used to combine transformations into one transformation matrix. It is used to describe a sequence of threedimensional transforms in a 4×4 grid.
For example, instead of using two or more transform functions in one declaration like so:transform: rotate3d(1, 0, 1, 45deg) translate3d(24px,25px, 100px);
Using the
matrix3d()
function, we can combine these two transformations into one matrix:transform: matrix3d(0.8535533905932737, 0.4999999999999999, 0.14644660940672619, 0, 0.4999999999999999, 0.7071067811865476, 0.4999999999999999, 0, 0.14644660940672619, 0.4999999999999999, 0.8535533905932737, 0, 22.62994231491119, 20.3223304703363, 101.3700576850888, 1)
As you can see, calculating the values of the
matrix3d()
function wouldn’t be easy if you’re not mathsavvy. These calculations were also probably not meant to be done by hand. Luckily, Eric Meyer and Aaron Gustafson created a very useful tool which can do the calculations for you—all you do is enter the transformations you want and the click the red button for the tool to generate the equivalentmatrix()
function for you.  perspective()

transform: perspective(<length>)
The technical explanation:
The
perspective()
function specifies a perspective projection matrix. This matrix scales points in X and Y based on their Z value, scaling points with positive Z values away from the origin, and those with negative Z values towards the origin. Points on the z=0 plane are unchanged. The<length>
parameter passed to it represents the distance of the z=0 plane from the viewer. Lower values give a more flattened pyramid and therefore a more pronounced perspective effect. For example, a value of 1000px gives a moderate amount of foreshortening and a value of 200px gives an extreme amount. The value for depth must be greater than zero, otherwise the function is invalid.In other words…
The
perspective()
function is used to give an element depth by making an element higher on the zaxis (closer to the viewer) appear larger, and an element further away to appear smaller. The smaller the value, the closer the zpane is from the viewer, and the more impressive the effect; the higher the value, the farther the element is from the screen and the more subtle the effect is.The
perspective()
function is used to activate the threedimensional space when you’re applying a threedimensional transformation on an element using any of the above listed functions. Specifying a perspective is important, otherwise the threedimensional effect will look flattened and twodimensional.A perspective can be applied using the
perspective()
function, or using theperspective
property. There is a major difference between these two, but the one to note at this point is that theperspective()
function is applied to an element that is being transformed in 3D space, while theperspective
property is applied to an element whose descendants are being transformed in 3D space. There are other differences between the perspective function and the property, you can read more about these differences in theperspective
property entry. In this entry, we’ll focus on usingperspective()
on an element transformed in threedimensional space, with no perspective defined on its container.For example, If you were to rotate an element around the yaxis using the
rotateY()
function, you need to specify a perspective in order to create a threedimensional space for the threedimensional transformations, otherwise the rotation will look flat and twodimensional. The following image shows the difference between an image rotated in threedimensional space with a perspective, and another one rotated without perspective.The
perspective()
function takes a<length>
value as a parameter. The smaller the value, the closer the zpane is from the viewer, and the more impressive the effect; the higher the value, the farther the element is from the screen and the more subtle the effect is. The following image shows the result of applying differentperspective()
values to an element.If you have multiple elements transformed in threedimensional space that also belong to the same container, it is recommended that you use the
perspective
property on the parent instead of using theperspective()
function on each individual element on its own, otherwise the overall effect may not be as you’d expect, because theperspective()
function will result in each element having its own vanishing point, while applying theperspective
property on the container will make sure all the elements inside it have the same vanishing point. You can read more about this in theperspective
property entry, and in this article by Dave DeSandro.
Notes
An element can be translated using the CSS position
property and its offset properties, but it is generally better to translate an element using the translate()
function because it is hardwareaccelerated, and therefore it is better for performance and to get smoother translations. The translate3d()
function is also sometimes used to force hardware acceleration on elements in WebKitbased browsers to push CSS animations into it, because it leads to smoother animations.
Examples
The following example translates and element and rotates it and then scales it up. The transformations are twodimensional, so no perspective is needed.
div { /* general styles here... */ width: 100px; height: 100px; backgroundcolor: #0099CC; /* transformation */ transform: translate(80px, 80px) rotate(45deg) scale(1.5, 1.5); }
The following example applies a threedimensional transformation on an element. The element will be rotated on the Y axis so that its front faces the right of the screen. It is also translated along the zaxis, which makes it move to the right of the screen. This is because the zaxis no longer points towards the viewer after the element is rotated on the yaxis—remember, rotating the element rotates its entire coordinate system with it.
In this example, the perspective is applied to the element using the perspective()
function.
.element { /* ... */ transform: perspective(800px) rotateY(90deg) translateZ(300px); }
You can do the same transformation but instead of applying the perspective to the element, you can activate the 3D space in the container.
.parent { /* ... */ perspective: 800px; } .child { /* ... */ transform: rotateY(90deg) translateZ(300px); }
Live Demo
Click on the element in the following demo to see it transform in threedimensional space. The transformation effect is applied on click using JavaScript. Clicking on the element more than once will toggle the .transform
class, which is contains the transformations. CSS transitions are used to make the transformation smooth.
Browser Support
The following is the support table for twodimensional CSS transformations:
CSS3 2D Transforms Support
Method of transforming an element including rotating, scaling, etc. Includes support for `transform` as well as `transformorigin` properties.
Current Status: W3C Working Draft
Supported from the following versions:
Desktop
 4*
 3.5*
 6
 10.*
 3.1*
Mobile / Tablet
 3.2*
 2.1*
 11
 56
 51
The following is the support table for threedimensional CSS transformations:
CSS3 3D Transforms Support
Method of transforming an element in the third dimension using the `transform` property. Includes support for the `perspective` property to set the perspective in zspace and the `backfacevisibility` property to toggle display of the reverse side of a 3Dtransformed element.
Current Status: W3C Working Draft
Supported from the following versions:
Desktop
 12*
 10*
 10
 15*
 4*
Mobile / Tablet
 3.2*
 3*
 37
 56
 51
Further Reading
 CSS Transforms Module Level 1
 Intro To CSS 3D Transforms by David DeSandro