JSFiddle - React, Tailwind, and code Playground

by borcagos

HTML

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>transform</title>
 
 </head>
 <body>
  <p><img src="https://icon2.kisspng.com/20180704/zg/kisspng-puppy-african-elephant-indian-elephant-linkedin-cl-nursery-rhymes-5b3d16b8f1d8e2.2866251315307301689906.jpg" alt="Ёжик" class="turn">
     <img src="https://icon2.kisspng.com/20180704/zg/kisspng-puppy-african-elephant-indian-elephant-linkedin-cl-nursery-rhymes-5b3d16b8f1d8e2.2866251315307301689906.jpg" alt="Ёжик" class="turn"></p>

     <img src="https://icon2.kisspng.com/20180704/zg/kisspng-puppy-african-elephant-indian-elephant-linkedin-cl-nursery-rhymes-5b3d16b8f1d8e2.2866251315307301689906.jpg" alt="Ёжик" class="turn"></p>

     <img src="https://icon2.kisspng.com/20180704/zg/kisspng-puppy-african-elephant-indian-elephant-linkedin-cl-nursery-rhymes-5b3d16b8f1d8e2.2866251315307301689906.jpg" alt="Ёжик" class="turn"></p>

     <img src="https://icon2.kisspng.com/20180704/zg/kisspng-puppy-african-elephant-indian-elephant-linkedin-cl-nursery-rhymes-5b3d16b8f1d8e2.2866251315307301689906.jpg" alt="Ёжик" class="turn"></p>

     <img src="https://icon2.kisspng.com/20180704/zg/kisspng-puppy-african-elephant-indian-elephant-linkedin-cl-nursery-rhymes-5b3d16b8f1d8e2.2866251315307301689906.jpg" alt="Ёжик" class="turn"></p>
 </body>
</html>

CSS

.turn { 
    transition-duration: 0.5s;
   }
   .turn:hover {
    -moz-transform: rotate(20deg); /* Для Firefox */
    -ms-transform: rotate(20deg); /* Для IE */
    -webkit-transform: rotate(20deg); /* Для Safari, Chrome, iOS */
    -o-transform: rotate(20deg); /* Для Opera */
    transform: rotate(20deg);
    transition-duration: 0.5s;
   }