CSS Tutorial
CSS - Introduction CSS - How CSS works? CSS - Syntax CSS - Colors CSS - Backgrounds CSS - Borders CSS - Margins CSS - Padding CSS - Height/Width CSS - Box Model CSS - Text CSS - Fonts CSS - Icons CSS - Cursor CSS - Outline CSS - Links CSS - Lists CSS - Tables CSS - Display CSS - Overflow CSS - Position CSS - Float CSS - Align CSS - Opacity CSS - Combinator CSS - Pseudo Classes CSS - Pseudo Elements CSS - Attribute Selector CSS - Buttons CSS - Pagination CSS - Navigation Bar CSS - Dropdowns CSS - Specificity CSS - Transition
CSS Advanced
CSS - Rounded Corners CSS - Border Image CSS - Background CSS - Gradients CSS - Shadow CSS - Text Effects CSS - 2D Transform CSS - 3D Transform CSS - Animation CSS - Object-fit CSS - Box Sizing CSS - Filters CSS - Style Images CSS - Variables CSS - Media Queries CSS - Flexbox Layout CSS - Grid Layout
CSS Responsive
RWD - Introduction RWD - Grid View RWD - Media Queries RWD - Images
CSS References
CSS - Reference CSS - Selectors CSS - Functions CSS - Units CSS - Animatable CSS - Entities

CSS 2D Transforms

The transform property applies a 2D or 3D transformation to an element such as translate, rotate, scale etc.

A transformation is an effect that lets an element change shape, size and position.

CSS supports 2D and 3D transformations.

Mouse over the elements below to see the difference between a 2D and a 3D transformation:



CSS 2D Transformations

In this chapter you will learn about the following 2D transformation functions:

  • translate()
  • rotate()
  • scale()
  • skewX()
  • skewY()
  • skew()
  • matrix()

You will learn about 3D transformations in the next chapter.


The translate() Function

The translate() function moves an element from its current position according to the parameters given for the X-axis and the Y-axis.

Original Transformed
Run code

The rotate() Function

The rotate() function rotates an element clockwise or counter-clockwise according to a given degree.

Original Transformed
Run code

Using negative values will rotate the element counter-clockwise.

Run code

The scale() Function

The scale() function increases or decreases the size of an element according to the parameters given for the width and height.

Original Transformed
Run code

The skewX() Function

The skewX() function skews an element along the X-axis by the given angle.

Original Transformed
Run code

The skewY() Function

The skewY() function skews an element along the Y-axis by the given angle.

Original Transformed
Run code

The skew() Function

The skew() function skews an element along the X-axis and Y-axis by the given angle.

Original Transformed
Run code

The matrix() Function

The matrix() function combines all the 2D transform functions into one.

This function take six parameters, containing mathematics functions, which allows you to rotate, scale, translate, & skew elements.

Syntax:
transform: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())
Run code

2D Transform Properties

Property Description
transform Applies a 2D or 3D transformation to an element
transform-origin Allows you to change the position on transformed elements

2D Transform Functions

Function Description Example
matrix(n,n,n,n,n,n) Defines a 2D transformation, using a matrix of six values Demo
rotate(angle) Defines a 2D rotation, the angle is specified in the parameter Demo
scale(x,y) Defines a 2D scale transformation, changing the elements width and height Demo
scaleX(n) Defines a 2D scale transformation, changing the element's width Demo
scaleY(n) Defines a 2D scale transformation, changing the element's height Demo
skew(x-angle,y-angle) Defines a 2D skew transformation along the X- and the Y-axis Demo
skewX(angle) Defines a 2D skew transformation along the X-axis Demo
skewY(angle) Defines a 2D skew transformation along the Y-axis Demo
translate(x,y) Defines a 2D translation, moving the element along the X- and the Y-axis Demo
translateX(n) Defines a 2D translation, moving the element along the X-axis Demo
translateY(n) Defines a 2D translation, moving the element along the Y-axis Demo