/* Syntax */
transform-origin: y-axis x-axis z-axis|initial|inherit;
/* Example */
transform-origin: center right;
/* Possible Values
x-axis - left, center, right, (length), (%)
y-axis - top, center, bottom, (length), (%)
z-axis - (length)
*//* transform origin default value is center */
img{
transition:transform 1s;
transform-origin:top; /*rotate from top center*/
transform-origin:right; /*rotate from right middle */
transform-origin:top-right; /*rotate from top right */
transform-origin:30% 80%; /* rotate from 30% x and 80% bottom*/
transform-origin:300px 150px; /*rotate from 300px from x and 150px bottom */
}
img:hover{
transform:rotate(45deg) /* rotate 45 deg clockwise */
}transform-origin: 0 0;
transform: translate(-100%, 50%) rotate(45deg) translate(100%, -50%);transform-origin: -100% 50%;
transform: rotate(45deg);