How to rotate Image 50 degrees using CSS

There are "two" ways you can rotate an image in CSS. Using the rotate() function or using the rotate property. Both methods are simple. Not just an image, you can use it to rotate any element at a given angle.

See this demo
Hover the mouse over the image to rotate at 50 degrees animatedly.

Using rotate() function

<head>
  <style>
    img {
      transform: rotate(50deg);
      -ms-transform: rotate(50deg);
      -webkit-transform: rotate(50deg);

      width: 75px;
      height: 75px;
      margin: 20px;
      border: none;
    }
  </style>
</head>

<body>
  <div>
    <img src='../../images/theme/css.png'>
  </div>
</body>

Try it

The rotate() function takes an argument in the form of angle. Here, I have defined 50 deg (or 50 degrees). Similarly, you can define a different angle like 20 deg etc.

The function is a member of the transform property.

Using rotate property

In-addition, you can use the rotate property in CSS to turn an image or any element. It does not require the transform property. It works independently.

<head>
  <style>
    img {
      rotate: 50deg;

      width: 100px;
      height: 100px;
      margin: 20px;
      border: none;
    }
  </style>
</head>

<body>
  <div>
    <img src='../../images/theme/google.png'>
  </div>
</body>

Try it

The rotate property also supports transitions and animations.

Let’s see how we can rotate an image 50 degrees animatedly on mouse hover.

<head>
  <style>
    img {
      margin: 20px;
      border: none;
      cursor: pointer;
    }
    
    img:hover {
      rotate: 50deg;
      transition: rotate 1s;
    }
  </style>
</head>

<body>
  <div>
    <img src='../../images/theme/google.png'>
  </div>
</body>

Try it

Do you know... you can use the "rotate" property in JavaScript? Check this out.

← PreviousNext →