Question

我试图在css中创造一扇开门的效果。

我遇到的问题是旋转的部分也沿y轴滑动。一扇门有一个固定的旋转点，这在这里并没有真正起作用。

如何防止滑动并确保div .mover的右侧部分固定在div .door的右侧？

＆＃13;

.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);
}

＆＃13;

<div class="door">
  <div class="mover">a</div>
</div>

＆＃13;

Answer 1

将transform-origin移至基座.mover选择器，而不是.door:hover .mover选择器。像这样：

＆＃13;

.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);
}

＆＃13;

<div class="door">
  <div class="mover">a</div>
</div>

＆＃13;

CSS动画 - 防止＆＃39;滑动＆＃39;在rotate3d上

1 个答案: