transform origin css code example

Example 1: center with css

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Example 2: css transform origin

/* Syntax */
transform-origin: y-axis x-axis z-axis|initial|inherit;

/* Example */
transform-origin: center right;

/* Possible Values

 x-axis - left, center, right, (length), (%)
 y-axis - top, center, bottom, (length), (%)
 z-axis - (length)

*/

Example 3: transform orgin css

div {
  transform: rotate(45deg);
  transform-origin: 20% 40%;
}

Example 4: transform-origin

transform-origin: -100% 50%;
transform: rotate(45deg);

Example 5: transform origin

Awesome Demo of transform-origin: 
https://www.w3schools.com/cssref/trycss3_transform-origin_inuse.htm

Tags:

Css Example