4

ある角度で 3D 変換されたブロック グリッドを作成しようとすると、要素の 1 つにカーソルを合わせると、ユーザーの方を向いて回転します。うまく機能しない例を以下に示します (Chrome のみ - Safari でも機能しますか?)。

ですから、これにはいくつかの問題があります。あなたも気付くと思いますが、それらがまったく解決できることを願っています。

  • ユーザーに向かってブロックを回転させるとうまくいきません。パースペクティブが間違っているようです。最後の行では、別の角度に向かっているように見えます。また、必要ではないはずの scale(1,1.9) も実行する必要がありますが、そうしないと、すべての高さが小さくなります。
  • 画面をドラッグして小さいサイズにすると、視点が変わります...
  • 最後に、(私のクロムでの) アニメーションは常にスムーズに進むとは限りません。時々そうですが、場合によっては、ブロックが最初に伸びてからすぐに回転します

これを解決するには？または、誰かがすでにこのようなものを以前に構築しましたか?

ここでの意味は jsfiddle で確認できます(実行画面を広くします)

CSS:

body{
            -webkit-perspective: 1000;
            background:black;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }
        #grid{
            margin:auto;
            width:840px;
            -webkit-transform: rotate3d(1,0,0, 70deg);
            margin-top:200px;
        }
        #grid>div{
            -webkit-perspective: 600;
            -moz-perspective: 600;
            perspective: 600;
            color:white;
            font-family:Arial;
            font-size:70px;
            line-height:140px;
            height:140px;
            width:140px;
            float:left;
            text-align:center;
            cursor:pointer;
            position:relative;
        }
        #grid div:hover{
            z-index:500;
        }
        #grid>div:hover div{
            -webkit-transform: rotate3d(1,0,0, -39deg) scale(1,1.9);
            -moz-transform: rotate3d(1,0,0, -39deg) scale(1,1.9);
            transform: rotate3d(1,0,0, -39deg) scale(1,1.9);
        }
        #grid>div>div{
            -webkit-transform-origin:50% 100%;
            width:100%;
            height:100%;
            -webkit-transition:-webkit-transform ease 0.5s;
            -moz-transition:-moz-transform ease 0.5s;
            transition:transform ease 0.5s;
        }
        #grid>div:nth-child(4n)>div{background:red;}
        #grid>div:nth-child(4n+1)>div{background:orange;}
        #grid>div:nth-child(4n+2)>div{background:blue;}
        #grid>div:nth-child(4n+3)>div{background:green;}

        #grid>div:nth-child(6n+1){-webkit-perspective-origin: 300% 100%;-moz-perspective-origin: 300% 100%;}
        #grid>div:nth-child(6n+2){-webkit-perspective-origin: 200% 100%;-moz-perspective-origin: 200% 100%;}
        #grid>div:nth-child(6n+3){-webkit-perspective-origin: 100% 100%;-moz-perspective-origin: 100% 100%;}
        #grid>div:nth-child(6n+4){-webkit-perspective-origin: 0% 100%;-moz-perspective-origin: 0% 100%;}
        #grid>div:nth-child(6n+5){-webkit-perspective-origin: -100% 100%;-moz-perspective-origin: -100% 100%;}
        #grid>div:nth-child(6n+6){-webkit-perspective-origin: -200% 100%;-moz-perspective-origin: -200% 100%;}

HTML:

<div id="grid">
<div><div>hee</div></div>
<div><div>wat</div></div>
<div><div>is</div></div>
<div><div>dit</div></div>
<div><div>hee</div></div>
<div><div>wat</div></div>
<div><div>is</div></div>
<div><div>dit</div></div>
<div><div>hee</div></div>
<div><div>wat</div></div>
<div><div>is</div></div>
<div><div>dit</div></div>
<div><div>hee</div></div>
<div><div>wat</div></div>
<div><div>is</div></div>
<div><div>dit</div></div>
<div><div>hee</div></div>
<div><div>wat</div></div>
<div><div>is</div></div>
<div><div>dit</div></div>
<div><div>hee</div></div>
<div><div>wat</div></div>
<div><div>is</div></div>
<div><div>dit</div></div>
</div>
4

1 に答える 1

2

あなたの問題について:

  1. 視点が間違っているようです。はい、そうです。「preserve-3d」を指定する必要があります。そうでない場合、孫は子の上にレンダリングされ、これは基本要素の上にレンダリングされます。悪いニュースは、プロパティが IE では機能しないことです。設定すると、IEを除くほとんどのブラウザーで修正されます。また、IE は接頭辞なしの構文を使用しているため、コードは将来的に保証されなくなります。実証目的のためだけに、次のようになります。

    #grid{
    margin:auto;
    width:840px;
    -webkit-transform: rotate3d(1,0,0, 70deg);
    -webkit-transform-style: preserve-3d; 
    margin-top:200px;
}
#grid>div{
    -webkit-perspective: 600;
    -moz-perspective: 600;
    perspective: 600;
    -webkit-transform-style: preserve-3d;
    color:white;
    font-family:Arial;
    font-size:70px;
    line-height:140px;
    height:140px;
    width:140px;
    float:left;
    text-align:center;
    cursor:pointer;
    position:relative;
}

(div が大きくなりすぎていることがわかります。デモ用に残しておきます)

  1. 小さいサイズで視点が変わります。それは、視点の原点を身体に置いていないからです。設定した場合

    body { -webkit-perspective: 1000; -webkit-perspective-origin: 420px 0px;
    背景: 黒; -webkit-background-size: カバー; -moz-background-size: カバー; -o-background-size: カバー; 背景サイズ: カバー; }

それはそれを修正します

アニメーションの動作がおかしいことについて; 私はそれを再現できませんでした。

更新されたデモ

于 2013-09-07T18:19:01.290 に答える