愿所有的美好和期待都能如约而至

如何才能使我的CSS变换 旋转和倾斜原点不向右移动几个像素?

发布时间:  来源:互联网  作者:匿名  标签:css css-transforms error How can I keep my CSS transform (rotate & s  热度:37.5℃

本文介绍了如何才能使我的CSS变换(旋转和倾斜原点)不向右移动几个像素?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在下面的示例中,当您单击div时,它将旋转和倾斜,但在此过渡期间,该位置似乎向右移动了几个像素。

有没有办法迫使它在过渡期间保持在左侧?我一直在玩原创游戏,但一直不能做到恰到好处:

$('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>

推荐答案

-webkit-transform-origin中缺少”Transform”!

$('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>

这篇关于如何才能使我的CSS变换(旋转和倾斜原点)不向右移动几个像素?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,

勇敢去编程!

勇敢的热爱编程,未来的你一定会大放异彩,未来的生活一定会因编程更好!

TOP