ARTICLE AD BOX
I have two perpendicular rectangles in an "L" shape and I'm trying to pivot the vertical one towards the other (the corner of the L should be the pivot point) but I'm running into two issues: the vertical one begins to skew into a parallelogram and also it seems to lose some height as it rotates around. Can you help me figure out what I can change to fix this?
:root {
--vdilation_factor: 2;
--vdilation_factor_inv: calc(1 / var(--vdilation_factor)); /* Compute the inverse of dilation_factor */
--hdilation_factor: 10;
--hdilation_factor_inv: calc(1 / var(--hdilation_factor)); /* Compute the inverse of dilation_factor */
}
.container {
position: relative;
height: 400px; /* Increased height to accommodate animation */
border: 1px solid #ccc;
overflow: visible; /* Temporarily change to 'visible' for debugging */
}
/* This is the moving rigid body */
.pivot {
position: absolute;
bottom: 0;
left: 50px;
transform-origin: bottom left; /* Anchor at the bottom-left corner */
offset-path: path("M 0,0 Q200,-200 400,0");
offset-rotate: 0deg;
animation: move 3.2s forwards; /* Adding 'forwards' ensures the final state persists */
}
/* Vertical segment (red bar) */
.vbar {
width: 8px;
height: 40px;
background: red;
position: absolute;
bottom: 0;
left: 0; /* Align the left edge with the container's left edge */
animation: yextend 3.2s forwards; /* 'forwards' keeps the final state */
transform-origin: bottom left; /* Ensure scaling happens from the bottom left */
}
/* Horizontal segment (green bar) */
.hbar {
width: 20px;
height: 8px;
background: green;
position: absolute;
bottom: 0;
right: 0px;
transform-origin: bottom left; /* Set the pivot to bottom-left */
animation: xextend 3.2s forwards , rotateBar 5s 3.2s forwards;
}
/* Keyframe for movement of the pivot */
@keyframes move {
from {
offset-distance: 0%;
transform: rotate(0deg) scaleY(1) scaleX(1);
}
to {
offset-distance: 100%;
transform: rotate(90deg) scaleY(var(--vdilation_factor)) scaleX(var(--hdilation_factor));
}
}
/* Keyframe for vertical bar scaling */
@keyframes yextend {
from {
transform: scaleX(1); /* Start with original size */
}
to {
transform: scaleX(var(--hdilation_factor_inv)); /* Inverse scaling for the vertical bar */
}
}
/* Keyframe for horizontal bar scaling */
@keyframes xextend {
from {
transform: scaleY(1); /* Start with original size */
}
to {
transform: scaleY(var(--vdilation_factor_inv)); /* Inverse scaling for the horizontal bar */
}
}
/* Keyframe for horizontal bar scaling */
@keyframes xextend2 {
from {
transform: scaleY(1); /* Start with original size */
}
to {
transform: scaleY(var(--vdilation_factor_inv)); /* Inverse scaling for the horizontal bar */
}
}
/* New keyframe for rotating the green bar (hbar) */
@keyframes rotateBar {
from {
transform: rotate(0deg);
transform-origin: bottom right;
}
to {
transform: rotate(45deg);
transform-origin: bottom right;
}
}
<div class="container">
<div class="pivot">
<div class="vbar"></div>
<div class="hbar"></div>
</div>
</div>
1,6394 gold badges29 silver badges65 bronze badges
4
![Why does a css tint appear when i open my webpage [closed]](https://stackoverflow.com/Content/Sites/stackoverflow/Img/apple-touch-icon@2.png?v=0f0cab681579)
As you can see from the Stack Snippet I converted your code to, you don't have enough code here to constitute a minimal reproducible example. Can you please edit it to include enough code to illustrate/reproduce the behavior you're describing? Specifically, note that className is not valid HTML for the class attribute. Are you using some other technology (a JS framework, perhaps)?
2026-04-22 19:50:52 +00:00
Commented 12 hours ago
Unfortunately, your code snippet does not show anything. I suggest you show two phases: the rectangles before transform and after. It is better to show without animation, just by applying two different CSS classes by a press of a button. Apparently, this transform is not rotation, but we can figure it out.
2026-04-22 22:36:21 +00:00
Commented 9 hours ago
@TylerH thank you for converting - sorry I forgot to change to "class" when I pulled in from the framework, React. The code snippet works now and should demonstrate the issue. I've left the animation in for now. Note that my question is about what happens as the end of the animation as the green angles downward. I'm also going to try to fix the red so that it stays at one width throughout.
2026-04-23 01:59:18 +00:00
Commented 6 hours ago
Can the problem be investigated by simplifying what you are doing - e.g. take out the parent (.pivot) also being animated? Try to aim for the simplest, minimal code that shows the problem.
2026-04-23 07:47:53 +00:00
Commented 12 mins ago