css - 使用 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>