CSS3 3D彎曲透視

CSS3 3D轉換+動畫效果很好。我想知道是否有辦法讓事情變得彎曲。CSS3 3D彎曲透視

本示例翻轉（紙張）div，但動畫看起來很僵硬，因爲實際上，當您翻動紙張時，它會彎曲一點。

因此，我忽視的任何屬性或可能使它看起來像它彎曲的組合？

div { 
    width: 90%; 
    height: 700px; 
    position: fixed; 
    left: 5%; 
    top: 0; 
    background-color: rgba(0,0,0,0.9); 

    -webkit-transform: perspective(1000); 
    -webkit-transform-style: preserve-3d; 
    -webkit-transform-origin: top; 
    -webkit-animation: "page curl down" 1s ease-out forwards; 
} 

@-webkit-keyframes "page curl down" { 
    from { 
     -webkit-transform: rotate3D(1,0,0,180deg); 
    } 

    to { 
     -webkit-transform: rotate3D(0,0,1); 
    } 
}

與彎曲（圖像）實施例頁面捲曲：http://numerosign.com/software/css3machine/#documentation

來源

2011-06-13 DADU

號的最佳方法是使用畫布然後滑過的圖像，如下所示：http://www.20thingsilearned.com/。下面是這種方法的細節：http://www.html5rocks.com/en/tutorials/casestudies/20things_pageflip.html

該方法有很多限制，但它是我見過的最好的。

來源

2011-06-16 20:25:30

瀏覽器元素目前僅限於佔用一個平面。無論。我一直在模擬曲線<div>s一段時間沒有明顯進步的想法。使用具有邊框的透明對象，border-radius和matrix3d可以創建「彎曲」，但是就這一點而言。如果僅指定邊框頂部，並且設置了邊框頂部左半徑，則可以創建具有彎曲末端的直線。顯然，這仍然是一個單一的平面的一部分，彎曲在其兄弟二維軸的方向。
只要我們開始考慮在第三維中彎曲二維元素，它目前不佔用，如果沒有Canvas，WebGL或其他渲染引擎，它就會變得不可能。

來源

2012-10-24 05:06:46

CSS3 3D彎曲透視

回答

相關問題