CSS 2D Transforms

CSS Transforms

CSS3 provides the developer with the transform property. This property helps to rotate, translate, skew as well as scale elements. Transformation is a procedure that helps in changing the size, position, and shape of the element.

There are two types of transformation in CSS3 i.e., 2D as well as 3D transformation.

CSS 2D Transforms

It helps in remodifying the element's structure as rotate, skew, scale and translate, etc.

Given below is a list of 2D transforms methods:

translate(x,y) – It helps in translating elements along the X and Y-axis.
translateX(n) - It helps in translating elements along X-axis.
translateY(n) - It helps in translating elements along the Y-axis.
Rotate () – It helps in rotating the element about an angle.
scale(x,y) –It helps in changing the height and width of an element.
scaleX(n) – It helps in changing the width of the element.
scaleY(n) – It helps in changing the height of the element.
skewX() – It tells about the skew transforms along X-axis.
skewY() – It tells about the skew transforms along Y-axis.
matrix () – It tells about the matrix transforms.

translate() method

This element is translated 40 pixels right, and 90 pixels down from its current position with the help of translate () method.

This a normal div element.

This element is scaled 1.5 times of its original width, and 2 times of its original height.

This element is skewed 10 degrees along the Y-axis and 20 degrees along the X-axis.

Learn HTML and CSS in 10 Days

Building Your First Web Page

Getting to Know HTML

Getting to Know CSS

CSS Properties

Opening the Box Model

Positioning Content

Working with Typography

Setting Background And Gradients

Creating Lists

Adding Media

Building Forms

Organizing Data With Tables

Writing Your Best Code

Some more HTML and HTML 5 tags

CSS 2D Transforms

Popular Exams

Company

Resources