CSS3 2D Transforms Property

How to apply css3 transform property for the specified element?

Explanation

CSS3 transforms allow you to translate, rotate, scale, and skew elements. A transformation is an effect that lets an element change shape, size and position.
2D transformation methods are as follows:

Property :

translate()

Usage:


transform: translate(50px,100px);

Definition:

The translate() method moves an element from its current position (according to the parameters given for the X-axis and the Y-axis).

Example:
<style>
.demodiv{
width: 300px;
height: 50px;
background-color: #9AFE2E;
border: 1px solid black;
transform: translate(50px,50px);
-ms-transform: translate(50px,50px); /* IE 9 */
-webkit-transform: translate(50px,50px); /* Safari */
}
</style>
<div class='demodiv'>
This is an example for 2D Transform Translate() property.
</div>

Result:
This is an example for 2D Transform Translate() property.



Ask Questions

Ask Question