<div class="container">
  <img class="my-face" id="spin-my-face" src="https://res.cloudinary.com/practicaldev/image/fetch/s--e93P8pXn--/c_fill,f_auto,fl_progressive,h_320,q_auto,w_320/https://thepracticaldev.s3.amazonaws.com/uploads/user/profile_image/83809/b7c219b0-9408-4366-ad9e-62e992e91c6c.png">
</div>

<div class="container">
  <img class="my-face" id="tilt-my-face" src="https://res.cloudinary.com/practicaldev/image/fetch/s--e93P8pXn--/c_fill,f_auto,fl_progressive,h_320,q_auto,w_320/https://thepracticaldev.s3.amazonaws.com/uploads/user/profile_image/83809/b7c219b0-9408-4366-ad9e-62e992e91c6c.png">
</div>
/* Spin 3 full turns on hover */
#spin-my-face:hover {
  transform: rotate(3turn);
}
#spin-my-face {
  transition: transform 1s ease-in-out;
}

/* Tilt 50% to the left on hover */
#tilt-my-face:hover {
  transform: rotate(-50grad);
}
#tilt-my-face {
  transition: transform .25s ease-in-out;
}


/*** inconsequential styling ***/
.my-face {
  width: 150px;
  border-radius: 30%;
  margin-bottom: -5px;
}

body {
  padding: 3rem;
}
.container {
  display: inline-block;
  border: 2px dotted #aaa;
  padding: 1rem;
  margin-right: 2.5rem;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.