CSS3 3D transforms allow web developers to take just about any element in an HTML document, and rotate, translate, and scale it, all while not changing its effect on the page layout. At the time
of this writing, 3D transforms are only supported in Safari, Firefox, and Chrome using vendor prefixes. Opera does not yet support 3D transforms. Internet Explorer 10, as well as Windows Store apps using JavaScript for Windows 8
introduces support for 3D transforms.
How do Transforms Work?
At a high level, a transform is an effect that lets an element change its shape, size and position. We will take a look at some examples to get a better idea of how these transforms work.
Transform Property
The transform property accepts for its value, one or more transform functions. These transform functions specify a transformation. Functions take the form of a function name, with a value inside of a set of
parenthesis.
Browser Support
At the time of this writing, the transform property is not supported by any browser. However, with regard to 3D transforms, vendor-prefixes are currently supported except for Opera and Internet Explorer 9 and earlier.
| Browser | Vendor Prefix |
|---|
| Internet Explorer 10+ | -ms-transform |
| Firefox | -moz-transform |
| Opera | -o-transform |
| Safari | -webkit-transform |
| Chrome | -webkit-transform |
Your browser
may support CSS3 3D Transforms.
Syntax
The transform property takes transform functions as its value. The default value is none.
transform: none|transform-functions
| Transform Function | Description |
|---|
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 3D transformation, using a 4x4 matrix of 16 values |
| perspective(n) | Defines a perspective view for a 3D transformed element |
| rotate3d(x,y,z,angle) | 3D rotation |
| rotateX(angle) | 3D rotation along the X-axis |
| rotateY(angle) | 3D rotation along the Y-axis |
| rotateZ(angle) | 3D rotation along the Z-axis |
| scale3d(x,y,z) | 3D scale transformation |
| scaleX(x) | 3D scale transformation by giving a value for the X-axis |
| scaleY(y) | 3D scale transformation by giving a value for the Y-axis |
| scaleZ(z) | 3D scale transformation by giving a value for the Z-axis |
| translate3d(x,y,z) | 3D translation |
| translateX(x) | 3D translation, using only the value for the X-axis |
| translateY(y) | 3D translation, using only the value for the Y-axis |
| translateZ(z) | 3D translation, using only the value for the Z-axis |
perspective() function
The perspective function changes the perspective through which an element is viewed, giving an illusion of depth. Even though we have the ability to work in three dimensions, the element themselves are two
dimensional. With the perspective function, as the value supplied to the perspective function increases, the further away from the viewer the element will appear. The value must be greater than 0 and is given
in pixels.
In this overview, we will take a look at the rotate related functions.
rotate3d() function
The rotate3d function specifies a clockwise 3D rotation. The element rotates by the angle specified in the last parameter, and about the [x,y,z] direction vector described by the first three parameters.
<!DOCTYPE html>
<html>
<head>
<style>
.group {
width:200px;
height:200px;
position:absolute;
border:1px solid black;
padding:10px;
}
.original {
background-color:#EFEFEF;
}
#target {
background-color:#FFAA00;
-ms-transform:rotate3d(0.7, 0.5, 0.7, 45deg);
-moz-transform:rotate3d(0.7, 0.5, 0.7, 45deg);
-webkit-transform:rotate3d(0.7, 0.5, 0.7, 45deg);
transform:rotate3d(0.7, 0.5, 0.7, 45deg);
}
</style>
</head>
<body>
<div class="original group" id="original">Original</div>
<div class="group" id="target">Rotate3D</div>
</body>
</html>
rotateX() function
The rotateX function specifies a clockwise rotation by the given angle about the x-axis. We can introduce the perspective function as well to add to the 3D effect.
#target {
background-color:#FFAA00;
-ms-transform: perspective(500px) rotateX(45deg);
-moz-transform: perspective(500px) rotateX(45deg);
-webkit-transform: perspective(500px) rotateX(45deg);
transform: perspective(500px) rotateX(45deg);
}
rotateY() function
The rotateY function specifies a clockwise rotation by the given angle about the y-axis. We can introduce the perspective function as well to add to the 3D effect.
#target {
background-color:#FFAA00;
-ms-transform: perspective(500px) rotateY(45deg);
-moz-transform: perspective(500px) rotateY(45deg);
-webkit-transform: perspective(500px) rotateY(45deg);
transform: perspective(500px) rotateY(45deg);
}
These are just some of the basic techniques you can use to create 3D transformations. With additional JavaScript code you can interact with the transforms and bring life to the target elements.
Did you find the page informational and useful? Share it using one of your favorite social sites.
Recommended Books & Training Resources
