CODEWITHSUNDEEP
csscss-transforms
aciddoll
aciddoll

Reputation: 841

how to change css transform-origin but preserve transformation

The bigger picture of this question is that I have a transformed map which needs to respond to touch gestures, it needs to scale and rotate from the center of the users gesture.

The transform-origin needs to change on every new gesture but without changing the rotation and scale, basically I imagine adding a translation to compensate for the change in transform-origin?

Or if there is a way to use matrix transform to preserve the transform while changing the transform-origin?

Upvotes: 2

Views: 2335

Answers (1)

Brandon Poe
Brandon Poe

Reputation: 481

I'm sure there are many ways to accomplish this, but it sounds like you are on the right track. I created a codepen demo to prototype it out and it seems like the trick is to add a negative offset to the beginning your translate followed by a positive offset at the end.

.box {
    transform: rotateX(45deg) scale(1.4);
    transform-origin: 10px 10px;
}

.box.is-active {
    transform: translate(-50px, -50px) rotateX(45deg) scale(1.4) translate(50px, 50px);
    transform-origin: 60px 60px;
}

I'm not sure how this would behave with a more complex transforms, but it seems to work fine with simple ones.

Upvotes: 2

Related Questions