CSS3 Transforms
With CSS3 transform, we can move, scale, turn, spin, and stretch elements.
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 | |||||
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()
Example
div{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-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);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
-o-transform: translate(50px,100px); /* Opera */
-moz-transform: translate(50px,100px); /* Firefox */
}
CSS3 2D Transforms
| « Previous | Next Chapter » |
CSS3 Transforms
With CSS3 transform, we can move, scale, turn, spin, and stretch elements. 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 | |||||
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()
Example
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
Try it yourself » |
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
div{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
}
CSS3 2D Transforms
| « Previous | Next Chapter » |
CSS3 Transforms
With CSS3 transform, we can move, scale, turn, spin, and stretch elements. 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 | |||||
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()
Example
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
Try it yourself » |
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
Try it yourself » |
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
div{
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9 */
-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);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-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);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-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 */
}
CSS3 2D Transforms
| « Previous | Next Chapter » |
CSS3 Transforms
With CSS3 transform, we can move, scale, turn, spin, and stretch elements. 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 | |||||
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()
Example
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
Try it yourself » |
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
Try it yourself » |
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
Try it yourself » |
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
Try it yourself » |
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.
ExampleHow to rotate a div element 30 degrees, using the matrix method:
Try it yourself » |
New Transform Properties
The following 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, moving the element along the X- and the Y-axis |
| translateX(n) | Defines a 2D translation, moving the element along the X-axis |
| translateY(n) | Defines a 2D translation, moving the element along the Y-axis |
| scale(x,y) | Defines a 2D scale transformation, changing the elements width and height |
| scaleX(n) | Defines a 2D scale transformation, changing the element's width |
| scaleY(n) | Defines a 2D scale transformation, changing the element's height |
| 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 |
No comments:
Post a Comment