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

CSS Transform is a powerful tool for web designers and developers, allowing them to create stunning visual effects and animations on web pages. CSS Transform enables developers to manipulate the position, size, and shape of elements on a webpage, making them more dynamic and interactive.

CSS Transform is part of the Cascading Style Sheets (CSS) language and is used to move, rotate, scale, and skew elements on a webpage. It is often used in combination with other CSS properties, such as transitions and animations, to create eye-catching effects. CSS Transform is supported by all major web browsers and is one of the most commonly used techniques for creating dynamic web pages.

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)

The 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);  
}