Transform

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

Scale

.element {
  width: 20px;
  height: 20px;
  transform: scale(20);
  background-color: crimson;
}
<div class="box" style="display: flex; justify-content: center; align-items: center; height: 500px;">
	<div class="element"></div>
</div>

If you scale an element, it enlarges the element and everything it contains. It effects height, width, margin, padding, font size, line height, word spacing, letter spacing and many more.

The function scale takes number without any unit.

• 5 means five times larger.
• 2 means twice the element.
• .5 means half the actual size.
• 1 means the original size.
• 0 means the element will be hidden.
• etc.

Two value

scale() function actually takes two value, first one is for horizontal scale and last value is vertical scale.

.element{
	transform:scale(.5,2);
}

scaleX()

scaleX() function is used to specify scale value horizontally.

.element{
	transform:scaleX(2);
	// Same as the following -
	transform:scale(2, 1);
}

scaleY()

scaleY() function is used to specify scale value vertically.

.element{
	transform:scaleY(2);
	// Same as the following -
	transform:scale(1, 2);
}

So scale() function is shorthand for scaleX() and scaleY()

Here is an example with an animation -

Negative Value

scale function accepts negative value which cause the element to flip. scaleX flips the element horizontally, scaleY filps the element vertically.

In the following example, the first box is the original box, the second box is flipped horizontally, the third box is flipped vertically and the last box is flipped in both direction.

.notFlipping{
  height :100px;
  display : flex;
  width: 200px;
  justify-content:center;
  align-items:center;
  background-color:purple;
  color:#fff;
  padding : 50px;
  box-sizing: border-box;
  margin: 20px;
}
.flipping1{
  height :100px;
  display : flex;
  width: 200px;
  justify-content:center;
  align-items:center;
  background-color:purple;
  color:#fff;
  padding : 50px;
  box-sizing: border-box;
  transform:scaleX(-1);
  margin: 20px;
}
.flipping2{
  height :100px;
  display : flex;
  width: 200px;
  justify-content:center;
  align-items:center;
  background-color:purple;
  color:#fff;
  padding : 50px;
  box-sizing: border-box;
  transform:scaleY(-1);
  margin: 20px;
}
.flipping3{
  height :100px;
  display : flex;
  width: 200px;
  justify-content:center;
  align-items:center;
  background-color:purple;
  color:#fff;
  padding : 50px;
  box-sizing: border-box;
  transform:scale(-1);
  margin: 20px;
}

<div class="notFlipping">Santanu Bera</div>
<div class="flipping1">Santanu Bera</div>
<div class="flipping2">Santanu Bera</div>
<div class="flipping3">Santanu Bera</div>

Skew

The skewX and skewY transform functions tilt an element one way or the other. In the example below, we can skew a 100px x 100px square to the left and right with skewX:

.scewElement{
	transform: skewX(30deg);
	height: 100px;
	width: 100px;
	background: crimson;
	margin: 30px;
}
<div class="box" style="display: flex;">
	<div class="scewElement">
	</div>
	<div class="scewElement">
	</div>
	<div class="scewElement">
	</div>
</div>

Whilst in this example we can skew an element vertically with with skewY:

.scewElement{
	transform: skewY(30deg);
	height: 100px;
	width: 100px;
	background: crimson;
	margin: 30px;
}
<div class="box" style="display: flex;">
	<div class="scewElement">
	</div>
	<div class="scewElement">
	</div>
	<div class="scewElement">
	</div>
</div>

You can use scew(xValue, yValue) for a shorthand. If you don't provide the second value, it is assumed to be 0deg.

.scewElement{
	transform: skew(30deg, 45deg);
	height: 100px;
	width: 100px;
	background: crimson;
	margin: 30px;
}
<div class="box" style="display: flex;">
	<div class="scewElement">
	</div>
	<div class="scewElement">
	</div>
	<div class="scewElement">
	</div>
</div>

Here is an example with animation so that it will be understandable how skew works -

Translate

This transform function moves an element sideways, or up and down.

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

The first values is the horizontal value and the second value is the vertical value.

The first value 100px will move the element 100px to the right. And the second value 50px will move the element to the bottom from it's current position.

Negative Value

If the horizontal value is negative, it will cause the element to move to the left side. If the vertical value is negative, it will cause the element to move to the upwards.

transformX & transformY

The property transform is shorthand for transformX and transformY.

The above value can be written as follow -

.element{
	transform:translateX(100px);
	transform:translateY(50px);
}

You can use animation with translateX and translateY to move the element diagonally smoothly.

It’s important to note that an element using transform will not cause other elements to flow around it. By using the translate function below and nudging the green square out of its original position, we’ll notice how the surrounding text will remain fixed in place, as if the square is a block element:

.square {
  height: 100px;
  width: 100px;
  background-color: #3d9970;
  display: flex;
  text-align: center;
  justify-content: center;
  align-content: center;
  color: white;
  padding: 5px;
  animation: shimmy 3s infinite;
  animation-direction: alternate;
}

@keyframes shimmy {
  0% {
    transform: translate(0, 0);    
  }
  100% {
    transform: translate(20px, 50px);
  }
}
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus porro officia, quae, explicabo 
deleniti quasi molestias dolorum non ad pariatur. Illo, inventore at. Odio iure adipisci quisquam, 
molestias impedit quo.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus unde, quis. Natus quasi, 
eveniet corporis facere laboriosam voluptatem ad blanditiis, temporibus, laborum voluptate possimus 
beatae illo. Illo molestiae, iure blanditiis.</p>
<div class="square"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum sit aperiam odit 
libero soluta delectus voluptatibus saepe laboriosam maiores, quas, fuga vitae. Suscipit 
eum assumenda hic sunt, debitis voluptatum odit.</p>

Rotate

You can rotate an element clockwise or anti-clockwise. If you give positive value, the element will rotate clockwise and if you provide negative value, the element will rotate anti-clockwise.

rotateX(deg)

rotateX rotates the element in respect of X axis(horizontally). Here is an example -

rotateY(deg)

rotateY rotates the element in respect of Y axis(vertically). Here is an example -

rotateZ(deg)

rotateZ rotates the element in respect of Z axis. Here is an example -

rotate(deg)

Remember rotate() is not shorthand for rotateX, rotateY, or rotateZ. This function same as rotateZ()

Multiple Transforms

With a space-separated list you can add multiple values to the transform property:

.element {
  width: 20px;
  height: 20px;
  transform: scale(20) skew(-20deg);
}

It’s worth noting that there is an order in which these transforms will be carried out, in the example above `skew` will be performed first and then the element will be scaled.

transform-origin

The transform-origin property is used in conjunction with CSS transforms, letting you change the point of origin of a transform.

.box {
  transform: rotate(360deg);
  transform-origin: top left;
}

As indicated above, the transform-origin property can take up to two space-separated keyword or length values for a 2D transform and up to three values for a 3D transform.

In the above example the first box has the default origin which is 50% 50%. In the second example, we have set the transform-origin to top left. By default, the origin of a transform is "50% 50%", which is exactly in the center of any given element. Changing the origin to "top left" (as in the demo above) causes the element to use the top left corner of the element as a rotation point.

Once again first box has the default origin where is the second box has the origin top left. You can experiment by changing the value to like "bottom right", "bottom left", "top left" etc. "Center Center" is the default value.

You can also give the percentage value for transform-origin

.element{
	transform-origin: -237% 164%;
}

Values can be lengths, percentages or the keywords top, left, right, bottom, and center.

The first value is the horizontal position, the second value is the vertical, and the third value represents the position on the Z axis. The third value will only work if you are using 3D transforms, and it cannot be a percentage.