Sie sind auf Seite 1von 4

8/4/13

CSS3 2D Transforms

Search w3schools.c Select Language


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

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 2D Transforms
Previous Next Chapter

CSS3 Transforms
With CSS3 transform, we can move, scale, turn, spin, and stretch elements.

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

How Does it Work?


A transform is an effect that lets an element change shape, size and position. You can transform your elements using 2D or 3D transformation.

Browser Support
Property t r a n s f o r m Internet Explorer 10, Firefox, and Opera support the transform property. Chrome and Safari requires the prefix -webkit-. Note: Internet Explorer 9 requires the prefix -ms-. Browser Support

2D Transforms
In this chapter you will learn about the 2d transform methods: translate() rotate() scale() skew() matrix() You will learn about 3D transforms in the next chapter.

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

The translate() Method

With the translate() method, the element moves from its current position, depending on the parameters given for the left (X-axis) and the top (Y-axis) position:

Example
d i v { t r a n s f o r m :t r a n s l a t e ( 5 0 p x , 1 0 0 p x ) ; m s t r a n s f o r m :t r a n s l a t e ( 5 0 p x , 1 0 0 p x ) ;/ *I E9* / w e b k i t t r a n s f o r m :t r a n s l a t e ( 5 0 p x , 1 0 0 p x ) ;/ *S a f a r ia n dC h r o m e* / }

www.w3schools.com/css3/css3_2dtransforms.asp

1/4

8/4/13
Try it yourself

CSS3 2D Transforms

The value translate(50px,100px) moves the element 50 pixels from the left, and 100 pixels from the top.

The rotate() Method

With the rotate() method, the element rotates clockwise at a given degree. Negative values are allowed and rotates the element counter-clockwise.

Example
d i v { t r a n s f o r m :r o t a t e ( 3 0 d e g ) ; m s t r a n s f o r m :r o t a t e ( 3 0 d e g ) ;/ *I E9* / w e b k i t t r a n s f o r m :r o t a t e ( 3 0 d e g ) ;/ *S a f a r ia n dC h r o m e* / }
Try it yourself The value rotate(30deg) rotates the element clockwise 30 degrees.

The scale() Method

With the scale() method, the element increases or decreases the size, depending on the parameters given for the width (X-axis) and the height (Y-axis):

Example
d i v { t r a n s f o r m :s c a l e ( 2 , 4 ) ; m s t r a n s f o r m :s c a l e ( 2 , 4 ) ;/ *I E9* / w e b k i t t r a n s f o r m :s c a l e ( 2 , 4 ) ;/ *S a f a r ia n dC h r o m e* / }
Try it yourself The value scale(2,4) transforms the width to be twice its original size, and the height 4 times its original size.

The skew() Method

With the skew() method, the element turns in a given angle, depending on the parameters given for the horizontal (X-axis) and the vertical (Y-axis) lines:

Example
d i v { t r a n s f o r m :s k e w ( 3 0 d e g , 2 0 d e g ) ; m s t r a n s f o r m :s k e w ( 3 0 d e g , 2 0 d e g ) ;/ *I E9* / w e b k i t t r a n s f o r m :s k e w ( 3 0 d e g , 2 0 d e g ) ;/ *S a f a r ia n dC h r o m e* / }
Try it yourself The value skew(30deg,20deg) turns the element 30 degrees around the X-axis, and 20 degrees around the Yaxis.

The matrix() Method

www.w3schools.com/css3/css3_2dtransforms.asp

2/4

8/4/13

CSS3 2D Transforms

The matrix() method combines all of the 2D transform methods into one. The matrix method take six parameters, containing mathematic functions, which allows you to: rotate, scale, move (translate), and skew elements.

Example
How to rotate a div element 30 degrees, using the matrix method:

d i v { t r a n s f o r m : m a t r i x ( 0 . 8 6 6 , 0 . 5 , 0 . 5 , 0 . 8 6 6 , 0 , 0 ) ; m s t r a n s f o r m : m a t r i x ( 0 . 8 6 6 , 0 . 5 , 0 . 5 , 0 . 8 6 6 , 0 , 0 ) ;/ *I E9* / w e b k i t t r a n s f o r m : m a t r i x ( 0 . 8 6 6 , 0 . 5 , 0 . 5 , 0 . 8 6 6 , 0 , 0 ) ;/ *S a f a r ia n dC h r o m e* / }
Try it yourself

New Transform Properties


The following table lists all the transform properties: Property transform Description Applies a 2D or 3D transformation to an element Allows you to change the position on transformed elements CSS 3 3

Related Searches: XML Data XML Parser Flex Training XML Data Integration Displaying This Xml File Command Line Tool Browser Application Java XML Parser

transform-origin

2D Transform Methods
Function matrix(n,n,n,n,n,n ) translate(x,y) translateX(n ) translateY(n ) scale(x,y) scaleX(n ) scaleY(n ) rotate(angle) skew(x-angle,y-angle) skewX(angle) skewY(angle) Description Defines a 2D transformation, using a matrix of six values Defines a 2D translation, moving the element along the X- and the Y-axis Defines a 2D translation, moving the element along the X-axis Defines a 2D translation, moving the element along the Y-axis Defines a 2D scale transformation, changing the elements width and height Defines a 2D scale transformation, changing the element's width Defines a 2D scale transformation, changing the element's height Defines a 2D rotation, the angle is specified in the parameter Defines a 2D skew transformation along the X- and the Y-axis Defines a 2D skew transformation along the X-axis Defines a 2D skew transformation along the Y-axis

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

www.w3schools.com/css3/css3_2dtransforms.asp

3/4

8/4/13

CSS3 2D Transforms

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_2dtransforms.asp

4/4