How Can I Simulate CSS `transform-origin` Using Only `transform: translate`?

Simulating Transform-Origin Using Translate in CSS

In CSS, the transform-origin property defines the origin point for applying transformations to an element. It is important to note that this property is applied by first translating the element by the negated value of its own transform-origin property, then applying the element's transform, and then translating by the property value.

To simulate the behavior of transform-origin using transform: translate, the following steps are necessary:

1. Negate the transform-origin values: The values for transform-origin need to be negated before applying them as translations. This is because the translate transformation will apply a negative value to the origin point, effectively inverting the origin.
2. Apply the element's transform: After negating the transform-origin values, the element's transform can be applied as usual.
3. Translate the origin: Finally, translate the origin back to its original position using the positive negated transform-origin values. This step ensures that the origin point is reset to its intended location.

Incorrect Example:

In the provided example, the issue is incorrect translations. The negated values for transform-origin are applied correctly, but the final translation is missing. The following corrected code will produce accurate results:

.origin {
  transform-origin: 100px 100px;
  transform: translate(100px, 0px) scale(2) rotate(45deg);
}

.translate {
  transform: translate(-100px, -100px) translate(100px, 0px) scale(2) rotate(45deg) **translate(100px, 100px)**;
}

Correct Example:

This corrected example includes the final translation step, which is necessary to restore the origin point to its intended position. Consequently, the boxes will exhibit the same transformed appearance, demonstrating that transform-origin can indeed be simulated using transform: translate.

The above is the detailed content of How Can I Simulate CSS `transform-origin` Using Only `transform: translate`?. For more information, please follow other related articles on the PHP Chinese website!