使用CSS在其侧面旋转对象

Question

例如,一个带有A,B,C和D点的正方形:

a---b
-   -
-   -
c---d

我想从左向右旋转它,因此A点和C点将更接近B和D,而B和D将保持原位.

这很像在书中翻页,所以页面翻到另一边但是B和D点没有移动.

我最接近的是https://jsfiddle.net/pa9ykhwa/,基本上就是这样

div{   
    transform-style: preserve-3d;
    transition-duration: 1s; 
}

div:hover {
    transform-origin: 100%;
    transform: rotateY(180deg) translateZ(0); 
}

问题是你可以清楚地看到B点和D点在移动.

Answer 1

您不仅要转换旋转,还要转换转换原点

它未设置在未覆盖状态,因此它是50%的默认值

更正:

div {
  height: 200px;
  width: 200px;
  background-color: red;
  transform-style: preserve-3d;
  transition-duration: 1s;
  transform-origin: 100%;
}
div:hover {
  transform: rotateY(180deg) translateZ(0);
}

<div style="">

</div>