CSS Transform

The CSS transform property allows you to perform 2D and 3D transformations on an element. This includes moving, scaling, rotating, skewing, and more.

2D Transforms

Translate

The translate() function moves an element from its current position (left or right and up or down).

div {
  transform: translate(50px, 100px);
}

In this example, the div element will move 50 pixels to the right and 100 pixels down from its original position.

Scale

The scale() function increases or decreases the size of an element (width and height).

div {
  transform: scale(2, 0.5);
}

In this example, the div element's width is doubled and the height is reduced by half.

Rotate

The rotate() function rotates an element clockwise or counterclockwise by a specified degree.

div {
  transform: rotate(45deg);
}

In this example, the div element is rotated 45 degrees clockwise.

Skew

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

div {
  transform: skew(20deg, 25deg);
}

In this example, the div element is skewed 20 degrees along the X-axis and 25 degrees along the Y-axis.

3D Transforms

Rotate 3D

The rotate3d() function rotates an element in 3D space around the [x,y,z] direction vector by a specified angle.

div {
  transform: rotate3d(1, 1, 1, 45deg);
}

In this example, the div element is rotated 45 degrees around the [1,1,1] direction vector.

Translate 3D

The translate3d() function moves an element in 3D space.

div {
  transform: translate3d(50px, 100px, 200px);
}

In this example, the div element will move 50 pixels to the right, 100 pixels down, and 200 pixels into the page.

Scale 3D

The scale3d() function scales an element in 3D.

div {
  transform: scale3d(2, 0.5, 1.5);
}

In this example, the div element's width is doubled, the height is reduced by half, and the depth is increased by 1.5 times.

Perspective

The perspective() function defines how far the object is away from the user in 3D space.

div {
  transform: perspective(500px);
}

In this example, the div element is positioned 500 pixels from the viewer.

Remember, the CSS transform property provides a way to create both 2D and 3D transformations, creating more dynamic and engaging web experiences.

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.