html - 如何防止我的 CSS 变换(旋转和倾斜原点)向右移动几个像素？

Question

在下面的示例中，当您单击 div 时，它会旋转和倾斜，但看起来位置在此转换过程中向右移动了几个像素。

有没有办法强制它在过渡期间保持在左侧？我玩过 origin，但没能恰到好处:

$('div.book').click(function() {
  $(this).toggleClass('open');
});

div.bg {
  background-color: #00adef;
  display: inline-block
}

.book {
  transition: all 2s;
  width: 145px;
  height: 200px;
  background-color: #333;
  -webkit-origin: left;
}

.book.open {
  -webkit-transform: rotateY(-90deg) skewY(-45deg);
  -webkit-transform-origin: 0 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='bg'>
  <div class='book'>
  </div>
</div>

Answer 1

您在 -webkit-transform-origin 中缺少“转换”!

$('div.book').click(function() {
  $(this).toggleClass('open');
});

div.bg {
  background-color: #00adef;
  display: inline-block
}

.book {
  transition: all 2s;
  width: 145px;
  height: 200px;
  background-color: #333;
  -webkit-transform-origin: left;
}

.book.open {
  -webkit-transform: rotateY(-90deg) skewY(-45deg);
  -webkit-transform-origin: left;
  transform-origin: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='bg'>
  <div class='book'>
  </div>
</div>