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);
}