How to prevent a rotated div from moving when changing its width?-CodePudding

I have a reproduction of the issue I'm facing below:

.rect {
  transform: rotateZ(45deg);
  background-color: #ddd;
  position: absolute;

  width: 300px;
  height: 200px;

  animation: 3s linear 0s infinite normal none running widen;
}

@keyframes widen {
  from { width: 300px; }
  to { width: 500px; }
}

<div ></div>

Notice how as the rectangle gets wider, its position also changes. It is true that the element's programmatic position isn't changing, but visually on the screen it appears it is.

I am only looking to widen it without having it visually appear to move. That is, the right side of the rectangle should simply extrude out an additional 200 pixels. Is this possible?

Looking around, it seems like setting the transform-origin from center to top left accomplishes this effect, but unfortunately my rectangle's origin of rotation is around its center. Perhaps the solution is to temporarily set it in some way while the effect is occurring..

CodePudding user response：

An easy way to do this is to wrap the grey rectangle div in another div that does the rotating. That way the width and rotation can be controlled independently.

If other transformations need to be applied as well, this approach gives you control over the order the transformations will be applied.

.rect {
  transform: rotateZ(45deg);
}

.widen {
  background-color: #ddd;
  width: 300px;
  height: 200px;
  animation: 3s linear 0s infinite normal none running widen;
}

@keyframes widen {
  from {
    width: 300px;
  }
  to {
    width: 500px;
  }
}

<div >
  <div  />
</div>

CodePudding user response：

That squish effect is expected, but for this scenario I'd suggest not animating the size properties anyway since it's going to push your natural DOM flow around with if there's other elements. Instead try scale transform, see below.

.rect {
  transform: rotate(45deg);
  background-color: #ddd;
  position: absolute;

  width: 300px;
  height: 200px;

  transform-origin: center left;
  animation: 3s linear widen infinite;
}

/*
@keyframes widen {
  from { width: 300px; }
  to { width: 500px; }
}
*/

@keyframes widen {
  to { transform: rotate(45deg) scaleX(2);
}

<div ></div>

CodePudding user response：

It looks like it is moving because of the angle. If you want it to grow proportionally, add height to the animation.

Example 1:

.rect {
  transform: rotateZ(45deg);
  background-color: #ddd;
  position: relative;

  width: 300px;
  height: 200px;

  animation: 3s linear 0s infinite normal none running widen;
}

@keyframes widen {
  from { width: 300px; height: 200px; }
  to { width: 500px; height: 400px; }
}

<div ></div>

If we remove the rotation, it won't look like it is moving.

Example 2:

.rect {
  background-color: #ddd;
  position: relative;

  width: 300px;
  height: 200px;

  animation: 3s linear 0s infinite normal none running widen;
}

@keyframes widen {
  from { width: 300px; }
  to { width: 500px; }
}

<div ></div>