HTML CSS

ROTATE & SPIN IMAGES WITH PURE HTML CSS

CLOCKWISE .rotate-cw { transform: rotate(90deg) }   COUNTER CLOCKWISE .rotate-ccw { transform: rotate(-90deg) }

ROTATE IMAGES

01

<img class="rotate-cw" src="IMG.JPG"/> <img class="rotate-ccw" src="IMG.JPG"/>

SPINNING ANIMATION @keyframes spinning {   from { transform: rotate(0deg) }   to { transform: rotate(360deg) } }

SPINNING IMAGES

02

APPLY SPIN TO CSS CLASS .spin {   animation-name: spinning;   animation-duration: 3s;   animation-iteration-count: infinite;   animation-timing-function: linear; }   <img class="spin" src="IMG.JPG"/>