CSS transforms applies linear transformations to elements.
You can rotate, scale, skew, and translate elements.
The following table shows the properties:
Property | Description |
---|---|
transform | Specifies the transform function to apply. |
transform-origin | Specifies the origin of the transform. |
Applying a Transform
You apply a transform to an element through the transform property. The allowed values for transform property are a set of predefined functions:
Value | Description |
---|---|
translate(<length or %>) | Translate an element in the both directions. |
translateX(<length or %>) | Translate an element in the X direction. |
translateY(<length or %>) | Translate an element in the Y direction. |
scale(<number>) | Scale an element along both axes. |
scaleX(<number>) | Scale an element along X axe. |
scaleY(<number>) | Scale an element along Y axe. |
rotate(<angle>) | Rotate an element. |
skew(<angle>) | Skew an element along both axes. |
skewX(<angle>) | Skew an element along X axe. |
skewY(<angle>) | Skew an element along Y axe. |
matrix(4-6 x <number>) | Specify a custom transform. |
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
p {
padding: 5px;
border: medium double black;
background-color: lightgray;
font-family: sans-serif;
}
#myID {
font-size: x-large;
border: medium solid white;
background-color: green;
color: white;
padding: 4px;
-moz-transform: rotate(-45deg) scaleX(1.2);
}
</style>
</head>
<body>
<p>
<span id="myID">CSS</span>
<span id="myID1">HTML</span>
</p>
</body>
</html>
Home
HTML CSS Book
CSS
HTML CSS Book
CSS
Transforms:
- CSS transforms applies linear transformations to elements.
- Specifying an Origin
- Animating and Transitioning a Transform
Related: