7

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

4

2 に答える 2

4

いいえ。最適な方法は、canvas を使用して、次のように画像をスライドさせることです: http://www.20thingsilearned.com/。これがどのように機能するかの内訳は次のとおりです: http://www.html5rocks.com/en/tutorials/casestudies/20things_pageflip.html

この方法には多くの制限がありますが、これは私が見た中で最高のものです。

于 2011-06-16T20:25:30.217 に答える
2

ブラウザ要素は現在、単一の平面を占めるように制限されています。何があっても。私は<div>sしばらくの間、曲線をシミュレートするというアイデアに取り組みましたが、目立った進歩はありませんでした。境界線、border-radius、および matrix3d を持つ透明なオブジェクトを使用すると、「曲がり」を作成できますが、それはそれに関する限りです。border-top のみを指定し、border-top-left-radius を設定すると、端が曲がった直線を作成できます。明らかに、これはまだ 1 つの平面の一部であり、兄弟の 2 次元軸の方向に曲がっています。
2 次元の要素を現在占有していない 3 次元で曲げることを考え始めるとすぐに、Canvas、WebGL、またはその他のレンダリング エンジンなしでは文字通り不可能になります。

于 2012-10-24T05:06:46.110 に答える