CSS 2D Transforms

CSS 2D Transforms
Nikhil
Published on 2021-07-08 16:57:26

CSS 2D Transforms Function and Parameter Details


  • rotate(x) Defines a transformation that moves the element around a fixed point on the Z axis
  • translate(x,y) Moves the position of the element on the X and Y-axis
  • translateX(x) Moves the position of the element on the X-axis
  • translateY(y) Moves the position of the element on the Y-axis
  • scale(x,y) Modifies the size of the element on the X and Y-axis
  • scaleX(x) Modifies the size of the element on the X-axis
  • scaleY(y) Modifies the size of the element on the Y-axis
  • skew(x,y) Shear mapping, or transvection, distorting each point of an element by a certain angle in each direction
  • skewX(x) Horizontal shear mapping distorting each point of an element by a certain angle in the horizontal direction
  • skewY(y) Vertical shear mapping distorting each point of an element by a certain angle in the vertical direction
  • matrix() Defines a 2D transformation in the form of a transformation matrix. angle
  • The angle by which the element should be rotated or skewed (depending on the function with which it is used). Angle can be provided in degrees (deg), gradians (grad), radians (rad) or turns (turn). In skew() function, the second angle is optional. If not provided, there will be no (0) skew in Y-axis.
  • length-or-percentage The distance expressed as a length or a percentage by which the element should be translated. In translate() function, the second length-or percentage is optional. If not provided, then there would be no (0) translation in Y-axis.
  • scale-factor A number which defines how many times the element should be scaled in the specified axis. In scale() function, the second scale-factor is optional. If not provided, the first scale-factor will be applied for Y-axis also.

 

CSS 2D Transforms Rotate


HTML

<div class="rotate"></div>

CSS

.rotate {
width: 100px;
height: 100px;
background: teal;
transform: rotate(45deg);
}

This example will rotate the div by 45 degrees clockwise. The center of rotation is in the center of the div, 50% from left and 50% from top. You can change the center of rotation by setting the transform-origin property.

transform-origin: 100% 50%;

The above example will set the center of rotation to the middle of the right side end

 

Scale


HTML

<div class="scale"></div>

CSS

.scale {
width: 100px;
height: 100px;
background: teal;
transform: scale(0.5, 1.3);
}

This example will scale the div to 100px * 0.5 = 50px on the X axis and to 100px * 1.3 = 130px on the Y axis. The center of the transform is in the center of the div, 50% from left and 50% from top.

 

Skew


HTML

<div class="skew"></div>

CSS

.skew {
width: 100px;
height: 100px;
background: teal;
transform: skew(20deg, -30deg);
}

This example will skew the div by 20 degrees on the X-axis and by - 30 degrees on the Y-axis. The center of the transform is in the center of the div, 50% from left and 50% from the top.

 

Multiple transforms


Multiple transforms can be applied to an element in one property like this:

transform: rotate(15deg) translateX(200px);

This will rotate the element 15 degrees clockwise and then translate it 200px to the right. In chained transforms, the coordinate system moves with the element. This means that the translation won't be horizontal but on an axis rotate 15 degrees clockwise as shown in the following image:

Changing the order of the transforms will change the output. The first example will be different to transform: translateX(200px) rotate(15deg);

HTML

<div class="transform"></div>

CSS

.transform {
transform: rotate(15deg) translateX(200px);
}

As shown in this image:

 

Translate


HTML

<div class="translate"></div>

CSS

.translate {
width: 100px;
height: 100px;
background: teal;
transform: translate(200px, 50%);}

This example will move the div by 200px on the X axis and by 100px * 50% = 50px on the Y axis.

You can also specify translations on a single axis.

On the X axis:

.translate {
transform: translateX(200px);
}

On the Y axis:

.translate {
transform: translateY(50%);
}

 

Transform Origin


Transformations are done with respect to a point that is defined by the transform-origin property. The property takes 2 values : transform-origin: X Y; In the following example the first div (.tl) is rotate around the top left corner with transform-origin: 0 0; and the second (.tr)is transformed around it's top right corner with transform-origin: 100% 0. The rotation is applied on hover :

HTML:

<div class="transform originl"></div>
<div class="transform origin2"></div>

CSS:

.transform {
display: inline-block;
width: 200px;
height: 100px;
background: teal;
transition: transform 1s;
}
.origin1 {
transform-origin: 0 0;
}
.origin2 {
transform-origin: 100% 0;
}
.transform:hover {
transform: rotate(30deg);
}

The default value for the transform-origin property is 50% 50% which is the center of the element.

 

ATutorialHub Related Guide

Comments (8)

Leave a Comment

Your email address will not be published. Required fields are marked*

User Comments

html tutorial comments

panduranga gupta

2021-07-05 07:03:13

good website for learning and help me a lot

html tutorial comments

raju

2021-09-25 14:58:47

The awsome website i am looking like for a long time, good work atutorialhub team keep doing

html tutorial comments

Shivani

2021-09-01 15:03:56

Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience

html tutorial comments

Harshitha

2021-09-10 15:05:45

It is very helpful to students and easy to learn the concepts

html tutorial comments

Sowmya

2021-09-14 15:06:41

Great job Tutorials are easy to understand Please make use of it

html tutorial comments

Zain Khan

2021-09-18 15:07:23

Great content and customized courses.

html tutorial comments

Rudrakshi Bhatt

2021-09-09 15:08:10

Well structured coursed and explained really well!

html tutorial comments

Pavana Somashekar

2021-09-11 15:09:08

Good platform for beginners and learn a lot on this website