Let’s learn about CSS function and how to use them to rotate images! We will start a property called transform. This doesn’t style anything until we give a value, transform property accepts functions as value.

Rotating elements

To add a function that rotate image we code rotate ( ) and we set the value of rotation.

img {
  transform: rotate(90deg);
 }

body {
  text-align: center;
}

To rotate counterclockwise, we add a minus (–) in-front of the number in degree.

img {
  transform: rotate(-10deg);
 }

body {
  text-align: center;
}

// We can use this  property and function with any element,
// not just images. For example we can set the button element 
// to rotate(90 deg).

button {
 border: solid 3px;
 transform: rotate(90 deg);
 width: 100 px;
 text-align: center;
}

Blurring elements

Let’s dive into more visual css changes, like blurring. To make big visual changes to elements we use the filter property.

img { 
 filter: blur(2px);
}

Like others functions, blur ( ) works on lots of different elements. For example on headings h2.

Graying out images

Let’s learn about two new filter functions that visually affect elements. grayscale ( ) setting it to 0% means it doesn’t affect image.

img1 {
  filter: grayscale (0%);
 }

img2 {  
 filter: grayscale (60%);
}

img2 {  
 filter: grayscale (100%);
}

grayscale ( ) turns images into different shade of gray with a value of 60%, we can see its grading effect on an image. Setting the value to 100% turns image completely gray.

Opacity

The opacity ( ) function change how visible element are. The lower the opacity ( ), the less visible an image becomes. Opacity means not see-through, setting it to 100% makes it visible.

img {
   filter: Opacity (100%);
   width: 150px;
  }

Opacity ( ) and grayscale ( ) work on a lot of different elements.