CSS3 transform | CSS Web Master

A variable element, sense of rhythm is put out

The transform, rotation and stretching the specified elements, will be something that the mobile can be.

Move(translate)

This is to perform the movement of the element.


 div#transform{
     width:80%;
     height:100px;
     background:#F1F1F1;
     transform:translate(50px,20px);
     -moz-transform:translate(50px,20px);
     -webkit-transform:translate(50px,20px);
     -o-transform:translate(50px,20px);
     -ms-transform:translate(50px,20px);
 }

Sample of transform

Reduced scale(scale)

This is, or to reduce the element, or to big.


 div#transform{
     width:80%;
     height:100px;
     background:#F1F1F1;
     transform:scaleY(0.5);
     -moz-transform:scaleY(0.5);
     -webkit-transform:scaleY(0.5);
     -o-transform:scaleY(0.5);
     -ms-transform:scaleY(0.5);
 }

Sample of transform

rotation(rotate)

This specifies the rotation of the elements.


 div#transform{
     width:80%;
     height:100px;
     background:#F1F1F1;
     transform:rotate(-45deg);
     -moz-transform:rotate(-45deg);
     -webkit-transform:rotate(-45deg);
     -o-transform:rotate(-45deg);
     -ms-transform:rotate(-45deg);
 }

Sample of transform

Inclination(skew)

This specifies the rotation of the elements.


 div#transform{
     width:80%;
     height:100px;
     background:#F1F1F1;
     transform:skewX(20deg);
     -moz-transform:skewX(20deg);
     -webkit-transform:skewX(20deg);
     -o-transform:skewX(20deg);
     -ms-transform:skewX(20deg);
 }

Sample of transform

The transform you may be able to also be used for other, but omitted here.

Can deform the specified elements, you might discover that the thought never occurred to go with these descriptions.

In addition, it is possible to each specified elements combine.

While also attention to the vendor prefix, please try to make a variety of things.

[reference]CSS Reference