CSS Transform

• CSS – Introduction
• CSS – Basics
• CSS – Include CSS File to HTML
• CSS – ID and Class
• CSS – Cascading Order
• CSS – Selector
• CSS – Pseudo Classes
• CSS – Colors
• CSS – Gradients
• CSS – Units
• CSS – Background
• CSS – Border
• CSS – Margin and Padding
• CSS – Height and Width
• CSS – Outline
• CSS – Display and Visibility
• CSS – Position
• CSS – Overlapping Elements
• CSS – Overflow
• CSS – Float
• CSS – Clear and Clearfix
• CSS – Left and Right
• CSS – Transform
• CSS – Opacity / Transparency
• CSS – text-shadow
• CSS – box-shadow
• CSS – object-fit
• CSS – Counters
• CSS – Variables
• CSS – Fonts
• CSS – Text Formatting
• CSS – Graphics
• CSS – Links
• CSS – Lists
• CSS – Tables
• CSS – Horizontal & Vertical Align
• CSS – Image Sprite
• CSS – Transitions
• CSS – 2D Transforms
• CSS – 3D Transforms
• CSS – Animations
• CSS – Media Queries
• CSS – Flexbox

Transform

The transform CSS property lets you rotate, scale, skew or translate an element. It modifies the coordinate space of the CSS visual formatting model.

Different values ​​of transform:

transform: matrix() rotate() scale() skew() translate() ;

all of this values has 3d and x ,y ,z  type(scaleX(),…).

Matrix(n,n,n,n,n,n):

The CSS matrix() function can be used with CSS transforms to style elements in a two-dimensional space.

#transforming {
    background-color : blueviolet;
    transform : matrix(0.3,0.5,-0.5,0.866,0,0);
}  

Rotate(angle):

The rotate() CSS function defines a transformation that rotates an element around a fixed point on the 2D plane, without deforming it.

#rotateddiv {
   transform: rotate(45deg);  
}

Scale(x,y)

he scale() CSS function defines a transformation that resizes an element on the 2D plane.

#scaleddiv {
    transform:scale(2,3);  
}

Translate(x,y):

The translate() CSS function repositions an element in the horizontal and/or vertical directions.

#translateddiv {
    transform:translate(150px,150px);  
}

Skew(x-angle,y-angle):

The skew() element performs a shear transformation which displaces each point of an element by a given angle in each direction.

#skewed {
   transform:skew(40deg,40deg);  
}