HOLLA TECH - LEARN

CSS3 Transforms
 

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.
CSS3 supports 2D and 3D transformations. Let’s take a look at the rotate transformation: 

div {
   width: 200px;
   height: 100px;
   margin-top: 30px;
   background-color: #32CD32;
}

 

The div element before the transform will look like this:

Holla Tech - Learn CSS3

Now let’s apply the div element to rotate by 10deg:

div {
   width: 200px;
   height: 100px;
   margin-top: 30px;
   background-color: #32CD32;
   transform: rotate(10deg);
}

 

And here is the result:

Holla Tech - Learn CSS3

The rotate() method rotates an element clockwise or counter-clockwise, according to a given degree.

NOTE!
Negative value will result in a counter clockwise rotation.

Using Negative Values
 

As previously mentioned, using a positive value will rotate an element clockwise, and using a negative value will rotate the element counter-clockwise.

div.positive {
   width: 200px;
   height: 100px;
   margin-top: 30px;
   background-color: #32CD32;
   transform: rotate(10deg);
}
div.negative {
   width: 200px;
   height: 100px;
   margin-top: 30px;
   background-color: #32CD32;
   transform: rotate(-10deg);
}

 

Result: 

Holla Tech - Learn CSS3


BACK NEXT

CLICK ON THE BUTTON BELOW TO GO TO THE CSS MAIN COURSE PAGE. 

CSS MAIN COURSE PAGE

 


© License: All Rights Reserved 


CONTACT HOLLA TECH – LEARN SUPPORT