CSS - transform Property

The CSS property transform is useful in rotation, scaling, skewing, or translation of an element. When the value of this property is anything other than none, it acts like a containing block for elements that have position: fixed, or position: absolute as values.

The CSS property transform can be specified as the keyword value none, or as one or more <transform-function> values.

The perspective() function should be listed first, when it is one of the multiple function values.

Possible values

The CSS property transform can have one of the following values:

  • <transform-function>: One of more of the transform functions to be applied.

  • none: Specifies no transformation to be applied.

Following section lists all the various <transform-function>s:

1. Matrix transformation

2. perspective()

3. Rotation

4. Scaling (resizing)

5. Skewing (distortion)

6. Translation (moving)

Applies to

All the transformable elements.

Syntax

transform = none | <transform-function> +

Following section shows the various ways in which this property can take values:

/* Keyword value */ 
transform = none;

/* Functions as values */
transform = matrix(1, 2, 3, 4, 5, 6);
transform = matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform = perspective(200px);
transform = rotate(45deg);
transform = rotate3d(1, 2, 3, 35deg);
transform = rotateX(25deg);
transform = rotateY(25deg);
transform = rotateZ(25deg);
transform = translate(10px, 60%);
transform = translate3d(10px, 60%, 2em);
transform = translateX(2.5em);
transform = translateY(2in);
transform = translateZ(2in);
transform = scale(2, 0.5);
transform = scale3d(2, 1.5, 0.5);
transform = scaleX(2);
transform = scaleY(1.5);
transform = scaleZ(0.5);
transform = skew(20deg, 10deg);
transform = skewX(20deg);
transform = skewY(2rad);

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

Accessibility concerns: For accessibility, the scaling and zooming animations are problematic and may be responsible for causing particular types of migraines. In case you need to add such animations on your page, give the user some flexibility to turn off the animations.

You may use the prefers-reduced-motion media feature to write a media query that may turn off the animations, when the user has a reduced animation in their selected system.

CSS transform - Rotating An Element

Following is an example of rotate() functions with various values as parameters, with positive and negative values:

<html>
<head>
<style>
   div {
      width: 100px;
      height: 100px;
      background-color: lightblue;
      margin-bottom: 1em;
   }

   .rotate-all-positive {
      background-color: lightgreen;
      transform: rotate(45deg);
   }

   .rotate-3d {
      background-color: tomato;
      transform: rotate3d(-2, -1, -1, 45deg);
   }

   .rotate-x {
      background-color: cyan;
      transform: rotateX(60deg);
   }

   .rotate-y {
      background-color: lightgoldenrodyellow;
      transform: rotateY(40deg);
   }

   .rotate-z {
      background-color: pink;
      transform: rotateZ(60deg);
   }
</style>
</head>
<body>
   <div>No function</div>
   <div class="rotate-all-positive">
        rotate
   </div>
   <div class="rotate-3d">
      rotate3d
   </div>
   <div class="rotate-x">
      rotateX
   </div>
   <div class="rotate-y">
      rotateY      
   </div>
   <div class="rotate-z">
      rotateZ
   </div>
</body>
</html>

CSS transform - Scaling An Element

Following is an example of scale() functions, showing how various values can be passed to the function:

<html>
<head>
<style>
   div {
      width: 100px;
      height: 100px;
      background-color: lightblue;
      margin-bottom: 1em;
   }

   .scale {
      background-color: lightgreen;
      transform: scale(0.7, 0.4);
   }

   .scale-3d {
      background-color: tomato;
      transform: scale3d(1, 1.5, 0.5);
   }

   .scale-x {
      background-color: cyan;
      transform: scaleX(1.2);
   }

   .scale-y {
      background-color: lightgoldenrodyellow;
      transform: scaleY(0.5);
   }

   .scale-z {
      background-color: pink;
      transform: perspective(300px) scaleZ(0.5);
   }
</style>
</head>
<body>
   <div>No function</div>
   <div class="scale">
        scale
   </div>
   <div class="scale-3d">
      scale3d
   </div>
   <div class="scale-x">
      scaleX
   </div>
   <div class="scale-y">
      scaleY      
   </div>
   <div class="scale-z">
      scaleZ
   </div>
</body>
</html>

CSS transform - Translating An Element

Following is an example of translate() functions with the various ways in which values can be passed to it:

<html>
<head>
<style>
   div {
      width: 100px;
      height: 100px;
      background-color: lightblue;
      margin-bottom: 1em;
   }

   .translate {
      background-color: lightgreen;
      transform: translate(10px, 50%);
   }

   .translate-3d {
      background-color: tomato;
      transform: perspective(500px) translate3d(10px, 40%, 1.5em);
   }

   .translate-x {
      background-color: cyan;
      transform: translateX(50px);
   }

   .translate-y {
      background-color: lightgoldenrodyellow;
      transform: translateY(30%);
   }

   .translate-z {
      background-color: pink;
      transform: perspective(500px) translateZ(1in);
   }
</style>
</head>
<body>
   <div>No function</div>
   <div class="translate">
        translate
   </div>
   <div class="translate-3d">
      translate3d
   </div>
   <div class="translate-x">
      translateX
   </div>
   <div class="translate-y">
      translateY      
   </div>
   <div class="translate-z">
      translateZ
   </div>
</body>
</html>
Advertisements