transform
CSS transform Property
The CSS transform property comes equipped with functions that you can run to manipulate the 2D and 3D display of elements. You can apply one or more transform functions to an element by making a space separated list of them. We will document the entire function list on this page and discuss how to animate these effects using the CSS transition property or animation property.
Standard Syntax:
#element {
transform: function(a,b,c) function(a,b,c) function(a,b,c);
}
NOTE: This CSS property is a level 3 property which may require browser prefixes in order to work in all browser software until this property standardizes.
Syntax With Prefixes Added:
#element {
-webkit-transform: function(a,b,c) function(a,b,c) function(a,b,c);
-o-transform: function(a,b,c) function(a,b,c) function(a,b,c);
transform: function(a,b,c) function(a,b,c) function(a,b,c);
}
2D transform Functions
matrix() - Makes 2D display changes according to a matrix of six numbers. Default matrix setting for an element is matrix( 1,0,0,1,0,0 ).
<style type="text/css">
#my_div{
transform: matrix( -1, .5, .3, -1, 100, 150 );
background:#09C; width:200px; height:200px;
}
</style>
<div id="my_div">Element content ...</div>
translate() - Translates the position of an element on both the X and Y axis(x, y). If only one value is given for the X axis then the Y axis defaults to 0px. Negative values may be used.
<style type="text/css">
#my_div{
transform: translate( 200px, -25px );
background: #B9DCFF; width:200px; height:200px;
}
</style>
<div id="my_div">Element content ...</div>
translateX() - Translates the position of an element on the X axis.
<style type="text/css">
#my_div{
transform: translateX( 300px );
background: #B9DCFF; width:200px; height:200px;
}
</style>
<div id="my_div">Element content ...</div>
translateY() - Translates the position of an element on the Y axis.
<style type="text/css">
#my_div{
transform: translateY( 100px );
background: #B9DCFF; width:200px; height:200px;
}
</style>
<div id="my_div">Element content ...</div>
scale() - Scales the element along the X and Y axis using positive or negative numbers. Negative numbers will make the element appear to be flipped on the axis where a negative value is used. Default scale setting for an element is ( 1, 1 ).
<style type="text/css">
#my_div{
transform: scale( 2, -2 );
background: #B9DCFF; width:200px; height:200px; margin:200px;
}
</style>
<div id="my_div">Element content ...</div>
scaleX() - Scales the element on the X axis using positive or negative numbers. Default scale setting for an element is ( 1 ).
<style type="text/css">
#my_div{
transform: scaleX( 2.5 );
background: #B9DCFF; width:200px; height:200px; margin:200px;
}
</style>
<div id="my_div">Element content ...</div>
scaleY() - Scales the element on the Y axis using positive or negative numbers. Default scale setting for an element is ( 1 ).
<style type="text/css">
#my_div{
transform: scaleY( 1.5 );
background: #B9DCFF; width:200px; height:200px; margin:100px;
}
</style>
<div id="my_div">Element content ...</div>
rotate() - Rotates an element in 2D space according to specified angle. Negative degrees will make it rotate counter-clockwise.
<style type="text/css">
#my_div{
transform: rotate( 90deg );
background: #B9DCFF; width:200px; height:200px;
}
</style>
<div id="my_div">Element content ...</div>
skew() - Skews an element on both the X and Y axiss according to specified angle. Negative degrees will make it skew into the opposite direction.
<style type="text/css">
#my_div{
transform: skew( 45deg, -10deg );
background: #B9DCFF; width:200px; height:200px;
}
</style>
<div id="my_div">Element content ...</div>
skewX() - Skews an element on the X axis according to specified angle.
<style type="text/css">
#my_div{
transform: skewX( 10deg );
background: #B9DCFF; width:200px; height:200px;
}
</style>
<div id="my_div">Element content ...</div>
skewY() - Skews an element on the Y axis according to specified angle.
<style type="text/css">
#my_div{
transform: skewY( 10deg );
background: #B9DCFF; width:200px; height:200px;
}
</style>
<div id="my_div">Element content ...</div>
3D transform Functions
matrix3d() - Makes 3D display changes according to a 4 x 4 matrix of 16 numbers. Default matrix3d setting for an element is matrix3d( 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 ).
<style type="text/css">
#my_div{
transform: matrix3d( 1, 0, 0, .001, 0, 1, 0, .002, 0, 0, 1, 0, 100, 100, 0, 1 );
background: #B9DCFF; width:200px; height:200px;
}
</style>
<div id="my_div">Element content ...</div>
translate3d() - Translates the position of an element in 3D space along the X, Y and Z axis. Elements will appear to zoom in and out when we change the Z axis value.
<style type="text/css">
#my_div{
transform: perspective( 1000px ) translate3d( 100px, 100px, -300px );
background: #B9DCFF; width:200px; height:200px;
}
</style>
<div id="my_div">Element content ...</div>
translateZ() - Translates the position of an element in 3D space along the Z axis only. Elements will appear to zoom in and out when we change the Z axis value.
<style type="text/css">
#my_div{
transform: perspective( 1000px ) translateZ( 100px );
background: #B9DCFF; width:200px; height:200px;
}
</style>
<div id="my_div">Element content ...</div>
scale3d() - Scales the element along the X, Y and Z axis.
<style type="text/css">
#my_div{
transform: perspective( 1000px ) scale3d( .5, .5, 3 ) translateZ( 100px );
background: #B9DCFF; width:200px; height:200px;
}
</style>
<div id="my_div">Element content ...</div>
scaleZ() - Scales the element along the Z axis.
<style type="text/css">
#my_div{
transform: perspective( 1000px ) scaleZ( 5 ) translateZ( -100px );
background: #B9DCFF; width:200px; height:200px;
}
</style>
<div id="my_div">Element content ...</div>
rotate3d() - Rotates an element in 3D space at an angle along the X, Y, and Z axis. rotate3d( x, y, z, angle ).
<style type="text/css">
#my_div{
transform: perspective( 1000px ) rotate3d( 7, .5, 0, 45deg );
background: #B9DCFF; width:200px; height:200px;
}
</style>
<div id="my_div">Element content ...</div>
rotateX() - Rotates an element at an angle in 3D space along its X axis.
<style type="text/css">
#my_div{
transform: perspective( 1000px ) rotateX( -45deg );
background: #B9DCFF; width:200px; height:200px;
}
</style>
<div id="my_div">Element content ...</div>
rotateY() - Rotates an element at an angle in 3D space along its Y axis.
<style type="text/css">
#my_div{
transform: perspective( 1000px ) rotateY( 45deg );
background: #B9DCFF; width:200px; height:200px;
}
</style>
<div id="my_div">Element content ...</div>
rotateZ() - Rotates an element at an angle in 3D space along its Z axis.
<style type="text/css">
#my_div{
transform: perspective( 1000px ) rotateZ( 45deg );
background: #B9DCFF; width:200px; height:200px;
}
</style>
<div id="my_div">Element content ...</div>
perspective() - Sets the viewing perspective origin point for 3D tranformations. 1000px is a moderate perspective and it gets more warped as you decrease this amount.
<style type="text/css">
#my_div{
transform: perspective( 1000px ) rotateX( 45deg );
background: #B9DCFF; width:200px; height:200px;
}
</style>
<div id="my_div">Element content ...</div>
Animating Your Tranformations
Animation Technique 1 - transition property
<style type="text/css">
#my_div{
transform: perspective( 1000px ) rotateX( 0deg );
background: #B9DCFF; width:200px; height:200px;
transition: transform 0.3s linear 0s;
}
#my_div:hover{
transform: perspective( 1000px ) rotateY( 45deg );
}
</style>
<div id="my_div">Element content ...</div>
Animation Technique 2 - animation property
<style type="text/css">
#my_div{
background: #B9DCFF; width:200px; height:200px;
animation: my-animation linear 1s infinite;
}
@keyframes my-animation {
50% { transform: perspective( 1000px ) rotateX( 45deg ); }
100% { transform: perspective( 1000px ) rotateX( 0deg ); }
}
</style>
<div id="my_div">Element content ...</div>
Animation Technique 3 - JavaScript Helping
The following URL is for a video tutorial that shows how to use JavaScript to call the CSS transition property to run on an element. Very useful for targeting many more user interaction events, Ajax return mechanisms and much more. Basically it allows you to run transitions any time you like in your applications.
0 Response to "transform"
Post a Comment