CSS3 2D Transforms

« Previous Chapter

Next Chapter »

---

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	Browser Support
transform		-moz-	-webkit-	-webkit-	-o-

Internet Explorer does not yet support the transform property.

Firefox requires the prefix -moz-.

Chrome and Safari requires the prefix -webkit-.

Opera requires the prefix -o-.

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 div { transform: rotate(30deg); -webkit-transform: rotate(30deg); /* Safari and Chrome */ -o-transform: rotate(30deg); /* Opera */ -moz-transform: rotate(30deg); /* Firefox */ }

---

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 div { transform: translate(50px,100px); -webkit-transform: translate(50px,100px); /* Safari and Chrome */ -o-transform: translate(50px,100px); /* Opera */ -moz-transform: translate(50px,100px); /* Firefox */ }

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

The rotate() Method

< / head > < body > < p > With the rotate ( ) method, the element rotates clockwise at a given degree. Negative values are allowed and rotates the element counter-clockwise.< / p > < table class = "example" width = "100%" > < tr > < td > < h2 class = "example" > Example< / h2 > < table class = "example_code notranslate" width = "100%" > < tr > < td > div< br / > { < br / > transform: rotate(30deg) ; < br / > -webkit-transform: rotate(30deg) ; /* Safari and Chrome */ < br / > -o-transform: rotate(30deg) ; /* Opera */ < br / > -moz-transform: rotate(30deg) ; /* Firefox */ < br / > } < / td > < / tr > < / table > < / td > < / tr > < / table > < p > The value rotate ( 30 deg ) rotates the element clockwise 30 degrees.< / p > < h2 > The scale ( ) Method< / h2 >

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 div { transform: scale(2,4); -webkit-transform: scale(2,4); /* Safari and Chrome */ -o-transform: scale(2,4); /* Opera */ -moz-transform: scale(2,4); /* Firefox */ }

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 div { transform: skew(30deg,20deg); -webkit-transform: skew(30deg,20deg); /* Safari and Chrome */ -o-transform: skew(30deg,20deg); /* Opera */ -moz-transform: skew(30deg,20deg); /* Firefox */ }

The value skew(30deg,20deg) turns the element 30 degrees around the X-axis, and 20 degrees around the Y-axis.

The matrix() Method

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: div { transform:matrix(0.866,0.5,-0.5,0.866,0,0); -moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */ -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */ -o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */ }

---

New Transform Properties

The Below table lists all the transform properties:

Property	Description	CSS
transform	Applies a 2D or 3D transformation to an element	3
transform-origin	Allows you to change the position on transformed elements	3

2D Transform Methods

Function	Description
matrix(n,n,n,n,n,n)	Defines a 2D transformation, using a matrix of six values
translate(x,y)	Defines a 2D translation
scale(x,y)	Defines a 2D scale transformation
rotate(angle)	Defines a 2D rotation, the angle is specified in the parameter
skew(x-angle,y-angle)	Defines a 2D skew transformation along the X- and the Y-axis
skewX(angle)	Defines a 2D skew transformation along the X-axis
skewY(angle)	Defines a 2D skew transformation along the Y-axis

« Previous Chapter

Next Chapter »

---