CSS3 - 2DTransforms & Transitions w3c
intro | transitions | scale | rotate | translate | skew | origin | examples | browser support
Origin
The origin allows you to change the the x and y axis of an object. The default value is 50%, 50%, which is the center of the object.
| X axis | Y axis |
|---|---|
| left | top |
| center | center |
| right | bottom |
| length | length |
| % | % |
The original styles for the flower
#flower{
-moz-transform: rotate(10deg);
-moz-transform-origin:10% 20%;
-webkit-transform: rotate(10deg);
-webkit-transform-origin:10% 20%;
-ms-transform: rotate(10deg);
-ms-transform-origin:10% 20%;
-o-transform: rotate(10deg);
-o-transform-origin:10% 20%;
transform: rotate(10deg);
transform-origin:10% 20%;
}
Change the Flower's x or y Axis
Alert
Although origin works on moble devices my following example does not work on all moble devices
10% 20%Although origin works on moble devices my following example does not work on all moble devices
Change the numbers below
then hit the return key
Y-axis:
X-axis:
You can also rotate the flower