CSS - transform-origin Property

The CSS property transform-origin is helpful in setting the origin for the transformation of an element. It is the point around which transformation occurs. For instance, the center of rotation is the transform origin of the rotate() function.

The origin of a transform is center, by default.

Possible values

The CSS property transform-origin can have the following values:

  • x-offset: A <length> or <percentage> value that defines how far from the left side of the box, the transform-origin is set.

  • offset-keyword: Keyword specifying the corresponding offset value, i.e., left, right, top, bottom, or center.

  • y-offset: A <length> or <percentage> value that defines how far from the top side of the box, the transform-origin is set.

  • x-offset-keyword: Keyword specifying the corresponding offset value, i.e., left, right, or center. It defines how far from the left side of the box, the transform-origin is set.

  • y-offset-keyword: Keyword specifying the corresponding offset value, i.e., top, bottom, or center. It defines how far from the top side of the box, the transform-origin is set.

  • z-offset: A <length> value that defines how far from the user eye the z=0 origin is set. A <percentage> value is not acceptable, as that makes the statement invalid.

The following table lists the mapping of keyword and percentage value:

Keyword Percentage value
left 0%
center 50%
right 100%
top 0%
bottom 100%

Applies to

All the transformable elements.

Syntax

transform-origin = x-axis y-axis z-axis;

Here x-axis, y-axis, z-axis values represent the horizontal, vertical, and depth positions, respectively, of the transformation origin. They can be specified in various units such as pixels, percentages, or keywords.

Following are the various ways in which the syntax can be written:

/* one-value syntax */
transform-origin = 20px;
transform-origin = 30%;
transform-origin = left;

/* x-offset-keyword / y-offset-keyword */
transform-origin = left top;

/* y-offset-keyword / x-offset-keyword */
transform-origin = bottom right;

/* x-offset-keyword / y-offset */
transform-origin = left 5px;

/* y-offset-keyword / x-offset-keyword */
transform-origin = bottom 10%;

/* x-offset / y-offset */
transform-origin = 3cm 5px | 25% 30%;

/* x-offset / y-offset / z-offset */
transform-origin = 3cm 5px -5px;

/* x-offset-keyword / y-offset-keyword / z-offset */
transform-origin = left top 3cm;

/* y-offset-keyword / x-offset-keyword / z-offset*/
transform-origin = bottom right 3cm;

The CSS property transform-origin can be specified in one of the ways, i.e., using the one, two, or three values, where each value signifies an offset value.

1. One-value syntax

  • Value must be either <length>, <percentage>, or one of the keywords left, center, right, top, and bottom.

  • When a single value, as <length>, or <percentage> is specified, it determines the horizontal offset (x-axis).

2. Two-value syntax

  • One value must be either <length>, <percentage>, or one of the keywords left, center,, and right.

  • Second value must be either <length>, <percentage>, or one of the keywords top, center,, and bottom.

  • When two, or more values are specified and either of the values is the keyword center, then first value determines the horizontal offset and the second determines the vertical offset.

3. Three-value syntax

  • First two values are same as that for two-value syntax.

  • Third value must always be a <length> value, representing the Z offset.

Note: For all SVG elements, the initial value of transform-origin is 0 0, except for root <svg> elements and <svg> elements that are direct descendant of an external XML namespace, and the elements whose transform-origin is 50% 50%.

CSS transform-origin - Example

Following example demonstrates the use of various values of transform-origin used along-side transform functions:

<html>
<head>
<style>
   #div1 {
      position: relative;
      height: 50px;
      width: 50px;
      margin: 30px;
      padding: 20px;
      border: 1px dotted black;
   }

   .sec-div {
      width: 30px;
      height: 30px;
      padding: 20px;
      position: absolute;
      border: 1px solid black;
      background-color: lightblue;
   }

   #initial-val {
      transform: rotate(30deg);
      transform-origin: 50% 50%;
   }

   #ykey-xkey-z {
      transform: rotate(45deg);
      transform-origin: top left 3cm;
   }

   #xkey-y {
      transform: scale(1.2);
      transform-origin: right 20%;
   }

   #x-y {
      transform: translate(10px 30px);
      transform-origin: 30px 10px;
   }

   #x-yNeg-percent{
      transform: skewX(30deg);
      transform-origin: 80% -20%;
   }
</style>
</head>
<body>
   <h1>The transform-origin Property</h1>

   <div id="div1">
      <div class="sec-div" id="initial-val">50% 50%</div>
   </div>
   <p>transform: rotate(30deg);
      transform-origin: 50% 50%;</p>
   
   <div id="div1">
      <div class="sec-div" id="ykey-xkey-z">top left 3cm</div>
   </div>
   <p>transform: rotate(45deg);
      transform-origin: top left 3cm;</p>
   
   <div id="div1">
      <div class="sec-div" id="xkey-y">right 20%</div>
   </div>
   <p>transform: scale(1.2);
      transform-origin: right 20%;</p>
   
   <div id="div1">
      <div class="sec-div" id="x-y">30px 10px</div>
   </div>
   <p>transform: translate(10px 30px);
      transform-origin: 30px 10px;</p>
   
   <div id="div1">
      <div class="sec-div" id="x-yNeg-percent">100% -30%</div>
   </div>
   <p>transform: skewX(30deg);
      transform-origin: 80% -20%;</p>
</body>
</html>
Advertisements