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>

使用CSS在其侧面旋转对象

1 个答案: