Specifying an Origin
By default, the center of the element is used.
The transform-origin Property Values:
Value | Description |
---|---|
<%> | Specifies the origin of the elements x or y axis. |
<length> | Specifies a distance. |
left | Specifies a position on the x axis. |
center | Specifies a position on the x axis. |
right | Specifies a position on the x axis. |
top | Specifies a position on the y axis. |
center | Specifies a position on the y axis. |
bottom | Specifies a position on the y axis. |
If you supply only one value, the second value is assumed to be center.
<!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);
-moz-transform-origin: right top;
}
</style>
</head>
<body>
<p>
<span id="myID">CSS</span>
This is a test.
This is a test.
This is a test.
</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: