CODEWITHSUNDEEP
javascripthtmlcsstransformcss-transforms
Ryan Peschel
Ryan Peschel

Reputation: 11756

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

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 class="rect"></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..

Upvotes: 2

Views: 1878

Answers (3)

Andrew Hulterstrom
Andrew Hulterstrom

Reputation: 1725

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 class="rect">
  <div class="widen" />
</div>

Upvotes: 2

Chris W.
Chris W.

Reputation: 23280

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 class="rect"></div>

Upvotes: 1

JayDev95
JayDev95

Reputation: 1104

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 class="rect"></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 class="rect"></div>

Upvotes: 0

Related Questions