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

您正在轉換不僅旋轉，而且轉換原點

沒有設置在unhovered狀態，所以它是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>