How can I keep my CSS transform (rotate & skew origin) from moving a few pixels to the right?

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>