HTML CSS

HOW TO ROTATE & SPIN IMAGES

(quick & simple example)

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">