How to Rotate Image with CSS Only

How to rotate image with CSS only?

Give the parent a style of overflow: hidden. If it is overlapping sibling elements, you will have to put it inside of a container with a fixed height/width and give that a style of overflow: hidden.

CSS- Applying perspective while rotating an img in css

Keep using your 3D transformation inside the animation:

.vinyl {
  width: 200px;
  display: block;
  margin: auto;
  opacity: 0.8;
  animation: rotation 2s infinite linear;
}

.container {
  transform-style: preserve-3d;
  perspective: 350px;
}

@keyframes rotation {
  from {
    transform: rotate3d(1, 0, 0, 45deg) rotate(0);
  }
  to {
    transform: rotate3d(1, 0, 0, 45deg) rotate(360deg);
  }
}

<div class="container">
  <img class='vinyl' src="https://picsum.photos/seed/picsum/200/300" alt="Sample Image">
</div>

How to edit the size of image while rotating?

@m4n0's answer works well. An alternate approach to timing rotations is to simply wrap .gear with another element, and transform the containing element:

<div class="gear__wrapper">
  <img class="gear" />
</div>

.gear__wrapper {
  transform: scaleX(0.5);
}

Rotating an image using css without moving around a circle

The default behaviour for a rotation transformation is to rotate the element around its center. You can change this by setting the transform-origin property.

https://www.w3schools.com/cssref/css3_pr_transform-origin.asp

You should find the coordinates of the rotational center in an image editor.

<!DOCTYPE html>
<html>
<head>
  <style>
    .rotate { 
      animation: rotation 3s infinite linear;
      transform-origin: 50% 63.67%; // (vertical center) / (image height) * 100 = (percentage)
    }
    @keyframes rotation {
      from { transform: rotate(0deg); }
      to { transform: rotate(359deg); }
    }
  </style>
</head>
<body>
  <img src="https://cdn2.iconfinder.com/data/icons/industry-3/512/rotor-512.png" class="rotate" width="200" height="200" />
</body>
</html>

Rotating a triangle image from the center using CSS only?

It's an equilateral triangle so the center is not the center of the image, you should adjust the transform-origin like this.

body {  background: #20262E;  padding: 20px;  font-family: Helvetica;}
#loading {  animation: rotation 2s infinite linear;  transform-origin: calc(100% / 2) calc(100% * 2 / 3);  /* transform-origin: 50%  66.666% */}
@keyframes rotation {  from {    transform: rotate(0deg);  }  to {    transform: rotate(359deg);  }}

<img id="loading" src='https://i.postimg.cc/zVSqhnr9/loader.png' border='0' alt='loader' />

CSS background image w/ rotate, repeat and opacity

You can do it like below:

.background {  height: 500px;  width: 500px;  position: relative;  z-index:0;  display: inline-block;  overflow:hidden; /* hide the overflow here not on the pseudo element */  padding: 100px;  border: black 3px solid;}
.background::before {  content: "";  position: absolute;  z-index: -1;  /* 141% ~ sqrt(2)x100% to make sure to cover all the area after the rotation */  width: 141%;  height:141%;  /**/  /* to center*/  left: 50%;  top: 50%;  /* */  background: url(https://cambridgewords.files.wordpress.com/2019/11/funny.jpg);  background-size: 100px 100px; /* size of the image*/  transform:translate(-50%,-50%) rotate(45deg); /* center the element then rotate */  opacity: 0.5;}

<span class='background'>    HElloWorld  </span>

I am trying to auto rotate an image after ever 5 seconds from css

You need an animation not a transtion.

CSS Animations @ MDN

This animation is 6s long but the rotation only takes place in the last 1/6th of the duration....which gives us a 1s animation every 5 seconds.

div {  width: 100px;  height: 100px;  background: #663399;  margin: 1em auto;  -webkit-animation-name: spinner;  animation-name: spinner;  -webkit-animation-duration: 6s;  animation-duration: 6s;  -webkit-animation-iteration-count: infinite;  animation-iteration-count: infinite;  -webkit-animation-timing-function: linear;  animation-timing-function: linear;}@-webkit-keyframes spinner {  83.33% {    -webkit-transform: rotate(0deg);    transform: rotate(0deg);  }  100% {    -webkit-transform: rotate(360deg);    transform: rotate(360deg);  }}@keyframes spinner {  83.33% {    -webkit-transform: rotate(0deg);    transform: rotate(0deg);  }  100% {    -webkit-transform: rotate(360deg);    transform: rotate(360deg);  }}

<div></div>

How to Rotate Image with CSS Only