CSS ANIMATION FOR BEGINNERS SERIES| CSS TRANSFORM (tutorial 1)

https://drive.google.com/file/d/11vi-nKFGfLPtWtwknkRP_5927MtiDgrl/view?usp=drivesdk

https://drive.google.com/file/d/11n6XlOMF7LFo1y9X6ii2aM81ImuHVuW8/view?usp=drivesdk
In this css animation for beginners series we are going to start with the css transform. if you have ever positioned an object whether relatively or absolutely, then you've already transformed that object.

Translation is the movement of an element from where it would normally appear to some other placs
A scale transform makes an element larger or smaller depending on what value you use. the values are unitless real numbers abs are always positive.
A rotation function causes an element to be rotated around an axis or around an arbitrary vector in 3D
When you skew an element, you slant it along one or both of the x and y axis. there is no Z axis. etc
thats the csss file
*{
margin: 0;
border: 0;
padding: 0;
box-sizing: border-box;
}
img{
height: 250px;
width: 250px;
margin: 200px 35%;
}
/*
img:hover{
transform:translateZ(200px);
transition-duration: 1400ms;
transition-timing-function: ease-in;
transition-delay: 300ms;
transform-origin:;
}

img:hover{
transform:scale3d(3,2,0);
transition-duration: 1800ms;
transition-timing-function: ease-in;
transition-delay: 200ms;
}
*/
img:hover{
transform:rotate3d(1,1,1,60deg);
transition-duration: 1200ms;
transition-timing-function: ease-in;
transition-delay: 200ms;
transform-origin:top;
}
/*
img:hover{
transform:skew(45deg,45deg);
transition-duration: 1200ms;
transition-timing-function: ease-in;
transition-delay: 200ms;
}

img:hover{
transform:perspective(200px);
transition-duration: 1200ms;
transition-timing-function: ease-in;
transition-delay: 200ms
}
*/