<1!DOCTYPE html> Transforms

Transforms

Transforms are mainly of two types- 2d and 3d .
Types of transforms -
  1. rotations
  2. scale
  3. translate
  4. skew
  5. perspective
  6. matrix
Let me rotate the following box.
Hover over it!

using transform: rotate(40deg);

Rotations

rotate 40deg


now using transform: rotate(0.25turn);
rotate 0.25turn


now using transform: rotate(0.5turn);
rotate 0.5turn


now using transform: rotate(0.75turn);
rotate 0.75turn

Rotation along axises



now using transform: rotatex(35deg);
imagine a human falling front / back with respect to the gruond
rotateX 35deg


now using transform: rotateY(35deg);
imagine a door opening with respect to its hinge
rotateY 35deg


now using transform: rotateZ(35deg);
imagine a clock's hand [ the z axis is going deep from the center of the clock]
rotateZ 35deg


Scaling

The following is scaled to 1.5em [ 1.5x original size]

transform: scale(1.5);
scale 1.5


With respect to x axis
transform: scaleX(1.5);
scaleX 1.5


With respect to y axis
transform: scaleY(1.5);
scaleY 1.5


With respect to z axis
transform: scaleZ(1.5);
scaleZ 1.5

Skewing

The following is skewd to 35deg

transform: skew(35deg);
skew 35deg


With respect to x axis
transform: skewX(35deg);
skewX 35deg


With respect to y axis
transform: skewY(35deg);
skewY 35deg


With respect to z axis
transform: skewZ(35deg);
skewZ 35deg

Translating

The following is translated to 35px

transform: translate(35px);
translate 35px


With respect to x axis
transform: translateX(205px);
translateX 205px


With respect to y axis
transform: translateY(35px);
translateY 35px


With respect to z axis
transform: translateZ(35px);
translateZ 35px
We can add multiple values in a single property
few collections
Great Sauce


Next Page