'How do you calculate X and Y offset between two elements with the same rotation, but with different transform origin positions?
I would like to know, how can we calculate the X and Y offset between two equal elements with the same rotation, but with a different transform origin positions.
I've created an example snippet to help better illustrate the problem.
There are two 150x100 px rectangles, one is being rotated at the transform origin position of 0% 0%, while other at 50% 50%. What would be the formula for calculating the offset between these two rectangles at specific rotation?
.wrapper {
position: relative;
background: silver;
margin: 150px;
width: 150px;
height: 100px;
}
.div-1, .div-2 {
position: absolute;
top: 0;
left: 0;
width: 150px;
height: 100px;
border: 1px solid black;
animation: rotate 30s linear infinite;
}
.div-1 {
transform-origin: top left;
}
.div-2 {
transform-origin: center center;
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
<div class="wrapper">
<div class="div-1"></div>
<div class="div-2"></div>
</div>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
