用CSS動畫彈出書本效果

所以我想製作一個彈出式書籍效果，但僅限2D。（所以不像beercamp頁面）。用CSS動畫彈出書本效果

理想的結果：

IMG的底部停留在同一位置
IMG開始看不見的則彈出（想象它趴在它的後面，然後被擡起，直到它是垂直的）
項目應該不會出現太（如果可能）壓縮

我讀過到CSS動畫，我能找到最接近的動畫

transform: rotateX(xdeg);

所以我生成此來測試它：

<!doctype html> 

<style type="text/css"> 

#popup 
{ 
    transform: rotateX(90deg); 
    animation-delay: 2s; 
    animation-duration: 3s; 
    animation-name: popupanim; 
    animation-iteration-count: infinite; 
    animation-direction: alternate; 
} 

@keyframes popupanim 
{ 
    from { 
     transform: rotateX(90deg); 
    } 

    to { 
     transform: rotateX(0deg); 
    } 
} 
</style> 

<body> 
    <img id="popup" src="https://si0.twimg.com/profile_images/604644048/sign051.gif" width=379px height=400px/> 
</body>

這樣做的問題是，圖像的變化的底部電平，並且該圖像被明顯壓縮。我該如何改進以滿足我的需求？

（也可作爲側不ROTATE3D（xdeg，ydeg，ZDEG）不產生任何輸出，爲什麼呢？）

來源

2013-05-17 louisdeb

添加一個容器元素，並使用transform-origin屬性，使其正常轉動：

#container { 
    display: inline-block; 

    perspective: 600px; /* Tweak this */ 
} 

#popup { 
    transform: rotateX(90deg); 
    transform-origin: bottom; 
}

演示：http://jsfiddle.net/BEy9f/3/

您需要使用父元素（#container），使視角正常工作。另外，如果#popup不在元素的中心（這就是爲什麼我把display: inline-block放在那裏），它會在動畫中偏離中心。

Chrome也支持3D轉換，因此您可以使用前綴-webkit-添加支持。

來源

2013-05-17 21:04:36 Blender

工作幾乎完美 - 我需要有透視嗎？首先要創建一個扁平物體，然後刪除透視圖（透視圖：0px;）。 – louisdeb

哦，如果我用-webkit-transform替換變換，是否需要在其他瀏覽器中包含原始的'transform：'函數，或者是否可以完全替換爲'-webkit-transform'： – louisdeb

@louisdeb：是'-webkit-'屬性僅適用於Webkit瀏覽器。 – Blender

用CSS動畫彈出書本效果

回答

相關問題