如何避免CSS转换（旋转和倾斜原点）向右移动几个像素？

Question

In the example below, when you click the div, it will rotate and skew, but it looks like the position moves a few pixels to the right during this transition.

Is there a way to force it to stay put on the left side during the transition? I have played with origin, but haven't been able to get it just right:

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

You were missing "transform" in -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> 

Answer 2

Change

transition: all 2s;

to:

transition: transform 2s;

since transition: all also transform your origin from (50%, 50%) to (0, 0)

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

 div.bg { background-color: #00adef; display: inline-block } .book { /*transition: all 2s;*/ transition: transform 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>