Normal
Transform can be used to manipulate objects to change their :-
size eg transform:scale(n, n);
rotation eg transform:rotate(10deg);
skew eg transform:skew(20deg);
reposition eg transform:translate(20px, 30px);
perspective eg transform:perspective(1000px);
NOTE...
You do not have to have separate lines, you could say
transform:scale(1.5, 1.5) rotate(30deg) translate(20px, 20px)
Any adjustments leave the margin in its original position
it only really moves the CONTENT around.
Normal
transform:scale(1.5, 1.5);
transform:rotate305deg);
transform:rotate(-30deg);
transform:translate(10px, 20px);
transform:translate(-10px, -20px);
transform:translateX(-50%);
(this moves 50% of the image size to the left)
transform:skewX(10deg, 10deg);
transform:skewY(10deg);
transform:skew(10deg, 10deg);
Hover over the picture to see what happens
- transform: scale(2, 2) translate(75px, -25px)
transform:scale(1.5, 1.5) rotate(30deg) translate(40px, 20px);
Changing the perspective can give it a 3D look...
Left image =
transform:perspective(750px)rotateY(65deg)scale(2.5, 1.5)translateX(50px);
Right image =
transform:perspective(1000px)rotateY(-65deg)scale(2.25, 1.25)translateX(50px);
transform:scale(1.5, 1.5) rotate(30deg) translate(40px, 20px);
Hover over a picture to spin it
It's easier to look at the code rather than me list it here
1st = spin around centre
2nd = spin around Y axis
3rd = spin around X axis
and it's best to use a .png so the background is still visible.