transform
UK[trænsˈfɔ:m] US[trænsˈfɔ:rm]
vt.Transform; change; change
vi.Change
n.[Number] transformation formula
origin
## English[ˈɒrɪdʒɪn] US[ˈɔ:rɪdʒɪn] n. origin; origin, root; [number] origin, starting point; [solution] (tendon, nerve) starting point
css transform-origin property syntax
Function:The transform-origin attribute allows you to change the position of the element being transformed. 2D transform elements change the element's x and y axes. 3D transform elements can also change their Z-axis. To better understand the transform-origin property, check out this demo. Safari/Chrome users: To better understand how the transform-origin property is used for 3D transformations, check out this demo.
Syntax: transform-origin: x-axis y-axis z-axis
Description: x-axis defines the view being Where to place on the X-axis. Possible values: left center right length % y-axis Defines where on the Y-axis the view is placed. Possible values: top center bottom length % z-axis Defines where on the Z-axis the view is placed. Possible values: length
Note: This attribute must be used together with the transform attribute.
css transform-origin property example
Instance
<!DOCTYPE html>
<html>
<head>
<style>
#div1
{
position: relative;
height: 200px;
width: 200px;
margin: 100px;
padding:10px;
border: 1px solid black;
}
#div2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: yellow;
transform: rotate(45deg);
transform-origin:20% 40%;
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin:20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-webkit-transform-origin:20% 40%; /* Safari and Chrome */
-moz-transform: rotate(45deg); /* Firefox */
-moz-transform-origin:20% 40%; /* Firefox */
-o-transform: rotate(45deg); /* Opera */
-o-transform-origin:20% 40%; /* Opera */
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">HELLO</div>
</div>
</body>
</html>Run instance »
Click the "Run instance" button to view the online instance