2D transforms

CSS 2D transforms allow us to rotate, move, scale and skew elements

Below is the famous "ascii shrug" (it's not actually ascii only I have been calling it that for a long time now) ¯\_(ツ)_/¯ inside a div that is slightly rotated clockwise.

¯\_(ツ)_/¯

#divtransform1 {
    border: 2px solid whitesmoke;
    border-radius: 30px;
    padding: 5px;
    width: 150px;
    min-height: 50px;
    margin: 2em 10em;
    align-content: center;
    text-align: center;
    -webkit-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    transform: rotate(-20deg);
}

Skew parameter does exactly what the name says - skews whatever element you throw at it.
It takes two parameters: x and y axis integer values (i.e. degrees).

¯\_(ツ)_/¯

#divtransform2 {
    border: 2px solid whitesmoke;
    border-radius: 30px;
    padding: 10px;
    width: 150px;
    min-height: 50px;
    margin: 2em 10em;
    align-content: center;
    text-align: center;
    -webkit-transform: skew(20deg, 10deg);
    -ms-transform: skew(20deg, 10deg);
    transform: skew(20deg, 20deg);
}