如何才能使我的CSS变换(旋转和倾斜原点)不向右移动几个像素? [英] How can I keep my CSS transform (rotate & skew origin) from moving a few pixels to the right?
本文介绍了如何才能使我的CSS变换(旋转和倾斜原点)不向右移动几个像素?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
有没有办法迫使它在过渡期间保持在左侧?我一直在玩原创游戏,但一直不能做到恰到好处:
$('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变换(旋转和倾斜原点)不向右移动几个像素?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文