transform-origin

transform-origin
CSS transform-origin Property
The transform-origin property sets the origin points of a transformation. You can think of it as setting hinge points for the X and Y axis, and setting an optional depth amount. It can be given up to 3 values separated by spaces. The first value sets the origin on the X(horizontal) axis and the second value sets the origin on the Y(vertical) axis. If given, the third value sets the Z(depth) axis.
Syntax
transform-origin: 0% 50% 100px;

NOTE: This CSS level 3 property requires browser specific prefixes to work in all browsers just until this property standardizes.
Possible ValuesYou can supply pixel lengths or percentages for the first two values. The keywords left, center, right, top and bottom may also be used instead for the first two values. The third value(Z axis) must be a pixel based length.
Usage ExampleThe following code example demonstrates the transform-origin property in action, change the three values to see how the transform animation changes according to the origin points and depth specified by you.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#mydiv{
    background: #090; width:150px; height:150px;
 
    transform-origin: 0% 50% 150px;
    -webkit-transform-origin: 0% 50% 150px;
 
    transform: perspective( 1000px ) rotateY( 0deg );
    -webkit-transform: perspective( 1000px ) rotateY( 0deg );
 
    transition: transform .5s linear 0s;
    -webkit-transition: -webkit-transform .5s linear 0s;
}
#mydiv:hover{
    transform: perspective( 1000px ) rotateY( -45deg );
    -webkit-transform: perspective( 1000px ) rotateY( -45deg );
}
</style>
</head>
<body>
<div id="mydiv"></div>
</body>
</html>
click here to code.
transform-origin

Syntax

Possible Values

Usage Example

0 Response to "transform-origin"

Post a Comment
