CSS 2D Transforms

• 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

2D Transforms

With CSS transforms you can  move, rotate, scale, and skew or translate an elements.

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

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

• Rotate: 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: This scale() CSS function defines a transformation that resizes an element on the 2D plane.

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

• scaleX: scaleX is used to change the width of the element.

img{
   transform: scaleX(2);  
}

• scaleY: scaleY is used to change the height of the element.

img{
   transform: scaleY(2);  
}

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

Skew(x-angle,y-angle):

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

• skewX: skewX used to defines skew transforms along with x axis

img{
   transform: skewX(30deg); 
}

• skewY: skewY used to defines skew transforms along with y axis

img{
   transform: skewY(60deg);  
}

• matrix: 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);
}