8/4/13

CSS3 3D Transforms

Search w3schools.c Select Language HOME HTML C SS JAVASC RIPT JQUERY XML ASP.NET PHP SQL MORE...
R EFER ENC ES | EXAMPLES

Get Certified
Study Web Technologies and get a diploma at w3schools.com

Degree in 3D Animation Find Top Anim ation C olle ge s n India Ge t info on C ourse s,Adm ission,Fe e s. www.Shik sha.com /3D-Anim ation Top Animation Institute HighTe ch Multim e dia Labs,Highly Q ualifie d Faculty. R e giste r Now! IMS-DIA.info/m ultim e dia Learn Animation Methods C are e r as an Anim ation Profe ssional Atte nd Fre e De m o C lass! www.are na-m ultim e dia.com

CSS3 Tutorial
CSS3 HOME CSS3 Introduction CSS3 Borders CSS3 Backgrounds CSS3 Text Effects CSS3 Fonts CSS3 2D Transforms CSS3 3D Transforms CSS3 Transitions CSS3 Animations CSS3 Multiple Columns CSS3 User Interface

CSS3 3D Transforms
Previous Next Chapter

3D Transforms
CSS3 allows you to format your elements using 3D transforms. In this chapter you will learn about some of the 3D transform methods: rotateX() rotateY() Click on the elements below, to see the difference between a 2D transform and a 3D transform:

CSS3 References
CSS3 Reference CSS3 Browser Support CSS3 Selectors CSS3 Reference Aural CSS3 Web Safe Fonts CSS3 Units CSS3 Colors CSS3 Color Values CSS3 Color Names CSS3 Color HEX

2D rotate

3D rotate

Browser Support
Property t r a n s f o r m Internet Explorer 10 and Firefox supports 3D transforms. Chrome and Safari requires the prefix -webkit-. Opera does not yet support 3D transforms (It supports 2D transforms only). Browser Support

The rotateX() Method

With the rotateX() method, the element rotates around its X-axis at a given degree.

Example
d i v { t r a n s f o r m :r o t a t e X ( 1 2 0 d e g ) ; w e b k i t t r a n s f o r m :r o t a t e X ( 1 2 0 d e g ) ;/ *S a f a r ia n dC h r o m e* / }
Try it yourself

Related Searches: Learn PHP Create HTML Pages Download The Opera Browser PHP Tutorials Create HTML CSS Templates W eb Design Templates HTML And JavaScript

The rotateY() Method

With the rotateY() method, the element rotates around its Y-axis at a given degree.

Example
d i v { t r a n s f o r m :r o t a t e Y ( 1 3 0 d e g ) ; w e b k i t t r a n s f o r m :r o t a t e Y ( 1 3 0 d e g ) ;/ *S a f a r ia n dC h r o m e* / }
Try it yourself

Transform Properties
The following table lists all the transform properties:

www.w3schools.com/css3/css3_3dtransforms.asp

1/2

8/4/13
Property transform transform-origin transform-style perspective perspective-origin backface-visibility

CSS3 3D Transforms
Description Applies a 2D or 3D transformation to an element Allows you to change the position on transformed elements Specifies how nested elements are rendered in 3D space Specifies the perspective on how 3D elements are viewed Specifies the bottom position of 3D elements Defines whether or not an element should be visible when not facing the screen CSS 3 3 3 3 3 3

3D Transform Methods
Function Description matrix3d Defines a 3D transformation, using a 4x4 matrix of 16 values (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n ) translate3d(x,y,z) translateX(x) translateY(y) translateZ(z) scale3d(x,y,z) scaleX(x) scaleY(y) scaleZ(z) rotate3d(x,y,z,angle) rotateX(angle) rotateY(angle) rotateZ(angle) perspective(n ) Defines a 3D translation Defines a 3D translation, using only the value for the X-axis Defines a 3D translation, using only the value for the Y-axis Defines a 3D translation, using only the value for the Z-axis Defines a 3D scale transformation Defines a 3D scale transformation by giving a value for the X-axis Defines a 3D scale transformation by giving a value for the Y-axis Defines a 3D scale transformation by giving a value for the Z-axis Defines a 3D rotation Defines a 3D rotation along the X-axis Defines a 3D rotation along the Y-axis Defines a 3D rotation along the Z-axis Defines a perspective view for a 3D transformed element

Previous

Next Chapter

Top 10 Tutorials
HTML Tutorial HTML5 Tutorial C SS Tutorial C SS3 Tutorial JavaScript Tutorial jQuery Tutorial SQL Tutorial PHP Tutorial ASP.NET Tutorial XML Tutorial

Top 10 References
HTML/HTML5 Reference C SS 1,2,3 Reference C SS 3 Browser Support JavaScript HTML DOM XML DOM PHP Reference jQuery Reference ASP.NET Reference HTML C olors

Examples
HTML Examples C SS Examples XML Examples JavaScript Examples HTML DOM Examples XML DOM Examples AJAX Examples ASP.NET Examples Razor Examples ASP Examples SVG Examples

Quizzes
HTML Quiz HTML5 Quiz XHTML Quiz C SS Quiz JavaScript Quiz jQuery Quiz XML Quiz ASP Quiz PHP Quiz SQL Quiz

Color Picke

Statistics

Browser Stat Browser OS Browser Disp

RE P O RT E RRO R

HO ME

TO P

P RI N T

FO RU M

A BO U T

W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our terms of use and privacy policy. C opyright 1999-2013 by Refsnes Data. All Rights Reserved.

www.w3schools.com/css3/css3_3dtransforms.asp

2/2