transform
CSS transform Property
With the help of the CSS transform property, a 2D or 3D transformation is applied to the element. It is one of the CSS3 properties. This property allows to rotate, skew, scale or translate the element. It takes none value or from the list of transform functions.
Only the box model positioned elements can be transformed.
| 类目 | 类目 |
|---|---|
| Initial Value | none |
| Applies to | Transformable elements. |
| Inherited | No. |
| Animatable | Yes. Degree is animatable. |
| Version | CSS3 |
| DOM Syntax | Object.style.transform = “rotate(10deg)”; |
Syntax
Syntax
transform: none | transform-functions | initial | inherit;
Example of the transform property:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
border: 2px dashed #666;
background-color: #8ebf42;
transform: translate(10px, 40px) rotate(50deg);
width: 130px;
height: 80px;
}
</style>
</head>
<body>
<h2>Transform property example</h2>
<div>An element</div>
</body>
</html>
Result
Example of the transform property with the “rotate”, “skewY”, “scaleY”, “translateX”, “skew” values:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
margin: 35px 20px;
}
div.box1 {
width: 130px;
height: 80px;
border: 1px solid #000;
background-color: #1c87c9;
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
div.box2 {
width: 120px;
height: 80px;
border: 1px solid #000;
background-color: #8ebf42;
-ms-transform: skewY(30deg);
-webkit-transform: skewY(30deg);
transform: skewY(30deg);
}
div.box3 {
width: 160px;
height: 80px;
border: 1px solid #000;
background-color: #FFFF00;
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
div.box4 {
width: 160px;
height: 80px;
border: 1px solid #000;
background-color: #ccc;
-ms-transform: rotate(160deg);
-webkit-transform: rotate(160deg);
transform: rotate(160deg);
}
div.box5 {
width: 160px;
height: 80px;
border: 1px solid #000;
background-color: #990099;
-ms-transform: translateX(50px);
-webkit-transform: translate(50px);
transform: translateX(50px);
}
div.box6 {
width: 160px;
height: 80px;
border: 1px solid #000;
background-color: #FF0000;
-ms-transform: skew(170deg, 170deg);
-webkit-transform: skew(170deg, 170deg);
transform: skew(170deg, 170deg);
}
</style>
</head>
<body>
<h2>Transform property example</h2>
<h3>transform: rotate(30deg):</h3>
<div class="box1"></div>
<h3>transform: skewY(30deg):</h3>
<div class="box2"></div>
<h3>transform: scaleY(1):</h3>
<div class="box3"></div>
<h3>transform: transform:rotate(160deg):</h3>
<div class="box4"></div>
<h3>transform: translateX(50px):</h3>
<div class="box5"></div>
<h3>transform: skew(170deg,170deg):</h3>
<div class="box6"></div>
</body>
</html>
In the given example, for maximum browser compatibility the -webkit- for Safari, Google Chrome, and Opera extensions are used.
The “skew” value
The “skew” value
The “skewX” and “skewY” transform values are used for somehow tilting an element. There doesn’t exist any shorthand property to skew an element, that’s why both of these values are used.
The “rotate” value
The “rotate” value
With the help of the “rotate” value, the element is rotated clockwise from the original position. In case of using a negative value, it will be rotated in the opposite direction.
The “translate” value
The “translate” value
The “translate” value is used for moving the element up or down, as well as sideways. More values are presented below.
Values
Values
| Value | Description | Play it |
|---|---|---|
| none | No transform is applied. | Play it » |
| translate() | Translates the element by a vector [tx, ty]. Tx is the translation along the x-axis. Ty is the translation along the y-axis. | Play it » |
| translateX() | Translates the element along the x-axis. | Play it » |
| translateY() | Translates the element along the y-axis. | Play it » |
| scale(x,y) | Scales an element up or down. | Play it » |
| scaleX() | Scales an element up or down the direction of the x-axis. | Play it » |
| scaleY() | Scales an element up or down the direction of the y-axis. | Play it » |
| rotate(number) | Rotates an element in the two-dimensional space.The angle is specified in the parameter. | Play it » |
| skew() | Defines a 2D skew transformation along the x-axis and the y-axis. | Play it » |
| skewX() | Defines a 2D skew transformation along the x-axis. | Play it » |
| skewY() | Defines a 2D skew transformation along the y-axis. | Play it » |
| matrix() | Defines a 2D transformation, using a matrix of six values. | Play it » |
| translateZ | Translates an element by the given amount along the z-axis. | |
| translate3d() | Defines a three dimensional translation. | |
| scaleZ() | Scales an element in the third dimension, along the z-axis. | |
| scale3d() | Defines a three dimensional scale transformation. | |
| rotateX() | Rotates an element about the x-axis in three-dimensional space. | Play it » |
| rotateY() | Rotates an element about the y-axis in three-dimensional space. | Play it » |
| rotateZ() | Rotates an element about the z-axis in three-dimensional space. | Play it » |
| rotate3d() | Defines a three dimensional rotate transformation. | |
| matrix3d() | Defines a 3D transformation, using a 4x4 matrix of 16 values. | |
| perspective() | Defines a perspective view for the three dimensional element. | |
| initial | Makes the property use its default value. | |
| inherit | Inherits the property from its parent element. |