❐CSS❐

❐wD Learn

CSS

CSS Introduction

CSS Selectors

CSS Color

CSS Background

CSS Border

CSS Margin

CSS Padding

CSS Box Model

CSS Text

CSS Font

CSS Link

CSS List

CSS Overflow

CSS Display

CSS Combinators

CSS Pseudo-classes

CSS Navigation Bar

CSS Hover

CSS Z-index

CSS Media Queries

CSS Shadow

CSS 2D Transform

CSS Animations

CSS Button

CSS FlexBox

CSS Grid

CSS Pagination

CSS 2D Transform This property allows the content to be restructured in ways like translate, rotate, scale, or skew, etc.

As it is 2D, therefore the content is transformed into x and y dimensions.

 Translate This property transforms the element’s position along x or y or both x and y directions.

Syntax



Syntax:
transform: translate(x, y);
Rotate This property rotates the content of the division either anticlockwise or clockwise according to the degree of rotation.

The values are taken in degrees, and adding a negative sign makes the rotation anticlockwise.

Example



transform: rotate(-10deg);
Scale This property rescales the width and height of the division in the ratio to the original dimensions.

 This code will increase the width and height by 1.4 and 1.2 times the original, respectively.

Example



transform: scale(1.4, 1.2);
Skew This property helps in adding a slant or skew to a division. (Skew: A pair of lines neither intersecting nor parallel)

 You can also choose to give the values for skew in a particular axis by adding a postfix with skew: skewX.

Example



transform: skew(10deg, 5deg);