Multiple transforms css – CSS Transforms | List of Property Values of CSS Transform | Definition, Syntax & Example Programs

by

Multiple transforms css: The transform property implements a 2D or 3D transformation to an element. This property permits you to rotate, scale, move, skew, etc., elements. Here, in this tutorial, we will be learning what is CSS transform property, its syntax, and few examples with outputs.

CSS transform Property

The transform property enables you to visually manipulate an element by skewing, rotating, translating, or scaling.

Transform Syntax:

/* Keyword values */
transform: none;

/* Function values */
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: perspective(17px);
transform: rotate(0.5turn);
transform: rotate3d(1, 2.0, 3.0, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: translate(12px, 50%);
transform: translate3d(12px, 50%, 3em);
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);
transform: scale(2, 0.5);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);

/* Multiple function values */
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);

/* Global values */
transform: inherit;
transform: initial;
transform: unset;

The CSStransformproperty may be defined as either the keyword valuenoneor as one or more<transform-function>values.

Ifperspective()is one of the multiple function values, so it must be listed first.

Also Check:

Example Using CSS Transform Property

<img style="transform: rotate(90deg);
            transform-origin: bottom left;"
     src="/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms/logo.png">

Output:

using css transform property result

2D transform Properties in CSS

The functions for 2D transforms are:

  • translate() helps us to move elements around.
  • rotate() helps to rotate elements.
  • scale() is used to scale elements in size.
  • skew() is used to twist or slant an element.
  • matrix() it is a way to perform the above operations using a matrix of 6 elements.

Also, there are functions for axis-specific actions:

  • translateX() is used to move elements around on the X axis.
  • translateY() is used to move elements around on the Y axis.
  • scaleX() is used to scale elements in size on the X axis.
  • scaleY() is used to scale elements in size on the Y axis.
  • skewX() is used to twist or slant an element on the X axis.
  • skewY() is used to twist or slant an element on the Y axis.

Example Program on 2D Transforms:

HTML:

<figure class="box-1">Box 1</figure>
<figure class="box-2">Box 2</figure>

CSS:

.box-1 {
transform: rotate(20deg);
}
.box-2 {
transform: rotate(-55deg);
}

Result:

css 2d transform property output

Combining multiple transforms

Multiple transform css: We can combine multiple properties into one by separating them with space.

transform: rotateY(20deg) scaleX(3) translateY(100px);

CSS 3D transform Properties

The 2D functions have an alternative 3D version too. By using 3D we can add another axis that is the Z-axis.

The perspective property can specify how far the 3D object is from the viewer.

.3Delement {
  perspective: 100px;
}

perspective-origin determines the appearance of the position of the viewer, how are we looking at it in the X and Y-axis.

Functions that control the Z-axis are:

  • translateZ()
  • rotateZ()
  • scaleZ()
  • translate3d()
  • rotate3d()
  • scale3d()