KandZ – Tuts

We like to help…!

CSS 45 💻 transform property introduction

a - transform property introduction
transform property is used to apply 2D or 3D transformation to elements.
You can rotate, scale, skew and more without affecting the layout of other elements
the values of transform are transform functions like scale, translate, rotate
You can combine multiple transform functions in a single transform property
transform: rotate(45deg); → rotates element 45 degrees
transform: scale(2, 1); → scales element 2x X axis
transform: skew(30deg, -20deg); → skews element
transform: translate(50px, 25px); → moves element

b - transform functions list
Matrix transformation: matrix(), matrix3d()
Perspective: perspective()
Rotation: rotate(), rotate3d(),rotateX(), rotateY(), rotateZ()
Scaling: scale(), scale3d(), scaleX(), scaleY(), scaleZ()
Skewing: skew(), skewX(), skewY()
Translation: translate(), translate3d(), translateX(), translateY(), translateZ()
Next videos will show examples with those transform fuctions

Leave a Reply