Html 如何防止CSS变换（旋转和倾斜原点）向右移动几个像素？

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

有没有办法强迫它在过渡期间保持在左侧？我玩过origin，但没能把它弄对：

$（'div.book'）。单击（函数（）{
$（this.toggleClass（'open'）；
});
div.bg{
背景色：#00adef；
显示：内联块
}
.书{
过渡：所有2；
宽度：145px；
高度：200px；
背景色：#333；
-webkit来源：左；
}
.打开{
-webkit变换：旋转（-90度）倾斜（-45度）；
-webkit转换原点：0；
}

您在
-webkit transform origin
中缺少“transform”


$（'div.book'）。单击（函数（）{
$（this.toggleClass（'open'）；
});
div.bg{
背景色：#00adef；
显示：内联块
}
.书{
过渡：所有2；
宽度：145px；
高度：200px；
背景色：#333；
-webkit变换原点：左；
}
.打开{
-webkit变换：旋转（-90度）倾斜（-45度）；
-webkit变换原点：左；
变换原点：左；
}

您在
-webkit transform origin
中缺少“transform”


$（'div.book'）。单击（函数（）{
$（this.toggleClass（'open'）；
});
div.bg{
背景色：#00adef；
显示：内联块
}
.书{
过渡：所有2；
宽度：145px；
高度：200px；
背景色：#333；
-webkit变换原点：左；
}
.打开{
-webkit变换：旋转（-90度）倾斜（-45度）；
-webkit变换原点：左；
变换原点：左；
}

更改

transition: all 2s;

致：

因为
转换：所有
也将您的原点从（50%，50%）转换为（0，0）


$（'div.book'）。单击（函数（）{
$（this.toggleClass（'open'）；
});
div.bg{
背景色：#00adef；
显示：内联块
}
.书{
/*过渡：所有2*/
转变：转变2s；
宽度：145px；
高度：200px；
背景色：#333；
-webkit来源：左；
}
.打开{
-webkit变换：旋转（-90度）倾斜（-45度）；
-webkit转换原点：0；
}

更改

transition: all 2s;

致：

因为
转换：所有
也将您的原点从（50%，50%）转换为（0，0）


$（'div.book'）。单击（函数（）{
$（this.toggleClass（'open'）；
});
div.bg{
背景色：#00adef；
显示：内联块
}
.书{
/*过渡：所有2*/
转变：转变2s；
宽度：145px；
高度：200px；
背景色：#333；
-webkit来源：左；
}
.打开{
-webkit变换：旋转（-90度）倾斜（-45度）；
-webkit转换原点：0；
}

如果将来没有此问题，我建议使用autoprefixer：如果将来没有此问题，我建议使用autoprefixer：