Did you find this useful?
Socialize it today.


CSS3 3D Transforms

Tuesday, November 27, 2012

browser

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.


BrowserVendor 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 FunctionDescription
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>


Original
Rotate3D


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);
}


Original
RotateX


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);
}


Original
RotateY


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.

Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

The Book of CSS3 Sergeys HTML5 CSS3 Responsive Web Design with HTML5 and CSS3