Transform

Chained Transforms

The transform functions are multiplied in order from left to right, meaning that composite transforms are e6ffectively applied in order from right to left.

Chained Transform Example

<div class="red-box"></div>
<div class="blue-box"></div>

.red-box,
.blue-box {
  position: absolute;
  width: 100px;
  height: 100px;
}

.red-box {
  background: red;
  transform: rotate(45deg) translate(200%);
}

.blue-box {
  background: blue;
  transform: translate(200%) rotate(45deg);
}

Here is the result: