---
title: "What is 2D and 3D transform in CSS?"  
description: "What is 2D and 3D transform in CSS?"  
author: "Ethan Karla"  
published: 2021-07-15  
canonical: https://answers.mindstick.com/qa/93710/what-is-2d-and-3d-transform-in-css  
category: "programming"  
tags: ["css cascading style sheets", "css"]  
reading_time: 2 minutes  

---

# What is 2D and 3D transform in CSS?

What is the [Transform](https://www.mindstick.com/interview/511/what-are-the-steps-to-transform-xml-into-html-using-xsl) [property](https://www.mindstick.com/blog/205/property-notification-in-c-sharp) in [CSS](https://www.mindstick.com/articles/12349/a-step-by-step-guide-to-making-pure-css-tooltips)? How many types of [transformation](https://www.mindstick.com/articles/337827/exploring-generative-ai-but-the-flip-side) [properties](https://www.mindstick.com/articles/23331/nootropics-7-different-types-and-their-unique-properties) are available that we can use

## Answers

### Answer by Shivam Prajapati

\
CSS3 comes with a transform property which is used to change the size, shape and position of any element. They are of 2 types: 1.) 2D Transform Following is a list of 2D transforms methods:

- translate(x,y): It is used to transform the element along X-axis and Y-axis.
- translateX(n): It is used to transform the element along X-axis.
- translateY(n): It is used to transform the element along Y-axis.
- rotate(): It is used to rotate the element on the basis of an angle.
- scale(x,y): It is used to change the width and height of an element.
- scaleX(n): It is used to change the width of an element.
- scaleY(n): It is used to change the height of an element.
- skewX(): It specifies the skew transforms along with X-axis.
- skewY():It specifies the skew transforms along with Y-axis.
- matrix(): It specifies matrix transforms.

2.) 3D Transform Following is a list of 3D transforms methods:

- matrix3D(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n):It specifies a 3D transformation, using a 4x4 matrix of 16 values.
- translate3D(x,y,z):It specifies a 3D translation.
- translateX(x):It specifies 3D translation, using only the value for the X-axis.
- translateY(y):It specifies 3D translation, using only the value for the Y-axis.
- translateZ(z):It specifies 3D translation, using only the value for the Z-axis.
- scale3D(x,y,z):It specifies 3D scale transformation
- scaleX(x):It specifies 3D scale transformation by giving a value for the X-axis.
- scaley(y):It specifies 3D scale transformation by giving a value for the Y-axis.
- scaleZ(z):It specifies 3D scale transformation by giving a value for the Z-axis.
- rotate3D(X,Y,Z,angle):It specifies 3D rotation along with X-axis, Y-axis and Z-axis.
- rotateX(angle):It specifies 3D rotation along with X-axis.
- rotateY(angle):It specifies 3D rotation along with Y-axis.
- rotateZ(angle):It specifies 3D rotation along with Z-axis.
- perspective(n):It specifies a perspective view for a 3D transformed element.


---

Original Source: https://answers.mindstick.com/qa/93710/what-is-2d-and-3d-transform-in-css

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.