with css3 we can transform and animate the html elements, CSS have two types of transforms 2d transform and 3d transform, we can move the elements, scale the elements, turn, spin, stretch and rotate the elements the css3 transforms supports all major browsers and some of them to 3D transforms
2D Transforms Properties
in 2d transforms we have few properties and we can use them to transform the html elements
we can move the html elements from current positions to selecting positions depending on the give X and Y axis positions
Rotate Property
we can rotate the elements clock wise and counter clock wise as a given degree, rotate the elements 0 to 360 degrees.
Scale Property
we can increase and decrease the width and height of html elements using scale() method
Skew Property
the skew() method turns the elements in a given angle depending on the skew parameters
in 2d transforms we have few properties and we can use them to transform the html elements
- translate()
- rotate()
- scale()
- skew()
we can move the html elements from current positions to selecting positions depending on the give X and Y axis positions
<style> div{ // the div moves from current position to 50 pixels from left and 50 pixels from top transform: translate(50px,50px); -ms-transform: translate(50px,50px); // IE Browser -webkit-transform: translate(50px,50px); // for Safari and Chrome -moz-transform: translate(50px,50px); // for Mozilla -o-transform: translate(50px,50px); // for Opeta } </style>
Rotate Property
we can rotate the elements clock wise and counter clock wise as a given degree, rotate the elements 0 to 360 degrees.
<style> div{ // the div rotate from 0 to 90 degrees to clock-wise transform: rotate(90deg); -ms-transform: rotate(90deg); // IE Browser -webkit-transform: rotate(90deg); // for Safari and Chrome -moz-transform: rotate(90deg); // for Mozilla -o-transform: rotate(90deg); // for Opera // the div rotate from 0 to minus 90 degrees to counter-clock-wise transform: rotate(-90deg); -ms-transform: rotate(-90deg); // IE Browser -webkit-transform: rotate(-90deg); // for Safari and Chrome -moz-transform: rotate(-90deg); // for Mozilla -o-transform: rotate(-90deg); // for Opera } </style>
Scale Property
we can increase and decrease the width and height of html elements using scale() method
<style> div{ // the div scale x and y access transform: scale(10,15); -ms-transform: scale(10,15); // IE Browser -webkit-transform: scale(10,15); // for Safari and Chrome -moz-transform: scale(10,15); // for Mozilla -o-transform: scale(10,15); // for Opera } </style>
Skew Property
the skew() method turns the elements in a given angle depending on the skew parameters
<style> div{ // the div scale x and y access transform: skew(10deg,20deg); -ms-transform: skew(10deg,20deg); // IE Browser -webkit-transform: skew(10deg,20deg); // for Safari and Chrome -moz-transform: skew(10deg,20deg); // for Mozilla -o-transform: skew(10deg,20deg); // for Opera } </style>
No comments :
Post a Comment