CSS3 2D Transform Property

//Example one

div:nth-child(1) {
background: rgb(122, 206, 122);
height: 140px;
transform: skew(-10deg) rotate(2deg);
-webkit-transform: skew(-10deg) rotate(2deg);
-moz-transform: skew(-10deg) rotate(2deg);
}



div:nth-child(1) p {
transform: skew(10deg) rotate(-2deg);
-webkit-transform: skew(10deg) rotate(-2deg);
-moz-transform: skew(10deg) rotate(-2deg);
padding: 3% 2%;
}

//Example Two

div:nth-child(2) {
border-bottom: 180px solid rgb(233, 233, 65);
border-left: 8px solid transparent;
border-right: 14px solid transparent;
height: 0;
margin-top: 60px;
transform: rotate(3deg);
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
}



div:nth-child(2) p {
transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
padding: 3.5% 3%;
}

//Example Three

div:nth-child(3) {
border-top: 140px solid rgb(253, 74, 74);
border-left: 23px solid transparent;
border-right: 14px solid transparent;
height: 0;
margin-top: 20px;
transform: rotate(2deg);
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
}



div:nth-child(3) p {
transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
position: absolute;
top: -140px;
padding: 3% 3%;
}



div:nth-child(3):before {
content: '';
width: 124%;
height: 80px;
background: white;
position: absolute;
left: -20%;
bottom: 120px;
transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
}

More Transform Properties

2D transformation methods:

• translate()
• rotate()
• scale()
• skewX()
• skewY()
• matrix()

The translate() Method

div {

    -ms-transform: translate(50px, 100px); /* IE 9 */

    -webkit-transform: translate(50px, 100px); /* Safari */

    transform: translate(50px, 100px);

}

The rotate() Method

// example one

div {

    -ms-transform: rotate(20deg); /* IE 9 */

    -webkit-transform: rotate(20deg); /* Safari */

    transform: rotate(20deg);

}

// example two

div {

    -ms-transform: rotate(-20deg); /* IE 9 */

    -webkit-transform: rotate(-20deg); /* Safari */

    transform: rotate(-20deg);

}

The scale() Method

// example one

div {

    -ms-transform: scale(2, 3); /* IE 9 */

    -webkit-transform: scale(2, 3); /* Safari */

    transform: scale(2, 3);

}

// example two

div {

    -ms-transform: scale(0.5, 0.5); /* IE 9 */

    -webkit-transform: scale(0.5, 0.5); /* Safari */

    transform: scale(0.5, 0.5);

}

The skewX() Method

div {

    -ms-transform: skewX(20deg); /* IE 9 */

    -webkit-transform: skewX(20deg); /* Safari */

    transform: skewX(20deg);

}

The skewY() Method

div {

    -ms-transform: skewY(20deg); /* IE 9 */

    -webkit-transform: skewY(20deg); /* Safari */

    transform: skewY(20deg);

}

The skew() Method

// example one

div {

    -ms-transform: skew(20deg, 10deg); /* IE 9 */

    -webkit-transform: skew(20deg, 10deg); /* Safari */

    transform: skew(20deg, 10deg);

}

// example two

div {

    -ms-transform: skew(20deg); /* IE 9 */

    -webkit-transform: skew(20deg); /* Safari */

    transform: skew(20deg);

}

The matrix() Method

div {

    -ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */

    -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */

    transform: matrix(1, -0.3, 0, 1, 0, 0);

}