CSS3 2D Transformations

CSS3 Transform - Skew

This section will be skewed.

.skew {
-webkit-transform:skew(30deg);
-moz-transform:skew(30deg);
-o-transform:skew(30deg);
-ms-transform:skew(30deg);
transform:skew(30deg);
}

CSS3 Transform - Scale   (mouse over for "hover")

.grid a {
width: 100px;
height: 60px;
font-size: 32px;
border: 1px #900 solid;
margin: 0 20px 20px 0;
text-align: center;
padding-top: 40px;
float: left;
z-index: 1;
position: relative;
text-decoration: none;
color: #900;
-webkit-transform:scale(1);
-moz-transform:scale(1);
-o-transform:scale(1);
-ms-transform:scale(1);
transform:scale(1);
}

.grid a:hover {
border: 1px #000 solid;
background: #eee;
z-index: 2;
-webkit-transform:scale(1.5);
-moz-transform:scale(1.5);
-o-transform:scale(1.5);
-ms-transform:scale(1.5);
transform:scale(1.5);
}

CSS3 Transform - Rotation

Latest News
Latest News will appear here...


Latest news
.tab {
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
-o-transform:rotate(-90deg);
-ms-transform:rotate(-90deg);
transform:rotate(-90deg);
}

.badge {
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);


-ms-transform:rotate(-45deg);


transform:rotate(-45deg);
}