CODEWITHSUNDEEP
csscss-animations
OliverRadini
OliverRadini

Reputation: 6467

CSS animation - prevent 'sliding' on rotate3d

I'm trying to create the effect of an opening door in css.

The issue I'm having is that the part which rotates also slides along the y axis. A door has a fixed rotation point, which is not really working here.

How can I prevent this sliding and ensure that the right part of the div .mover stays fixed to the right of the div .door?

.door {
  background-color: blue;
  width: 100px;
  height:100px;
  margin-left: 300px;
  display: block;
}

.mover {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: red;
  transition: all 1s ease;
}

.door:hover .mover {
  transform-origin: 100% 40%;
  transform: rotate3d(0,1,0,180deg);
}
<div class="door">
  <div class="mover">a</div>
</div>

Upvotes: 0

Views: 25

Answers (1)

Brett DeWoody
Brett DeWoody

Reputation: 62771

Move the transform-origin to the base .mover selector, instead of the .door:hover .mover selector. Like this:

.door {
  background-color: blue;
  width: 100px;
  height:100px;
  margin-left: 300px;
  display: block;
}

.mover {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: red;
  transition: all 1s ease;
  transform-origin: 100% 40%;
}

.door:hover .mover {
  transform: rotate3d(0,1,0,180deg);
}
<div class="door">
  <div class="mover">a</div>
</div>

Upvotes: 1

Related Questions