13

このリンクcode_on_jsfiddleで効果を使用しようとしています。効果は、コインが回転するときにコインの厚さを示すことです。コードは jsfiddle で正常に動作するようですが、コードベースで使用しようとすると動作しません。preserve-3d が機能しない、または他の問題が発生する可能性があるさまざまなシナリオを誰かが提案してください。

私は問題が何であるかを見つけようとしましたが、w3c.org で「3D 空間で要素の階層を保持するには、階層内の各祖先に値 'preserve-3d' が必要です」と書かれているリンクに出くわしました。 transform-style」なので、祖先のdivのいずれかがpreserve-3dスタイルを持っていない可能性があると思いましたが、祖先がpreserve-3dスタイルを持っていない状況をシミュレートしようとすると、必要なトランジションが機能していますリンク. Webkit を使用して、ホバー時の遷移を確認します。助けてください

4

3 に答える 3

21

私はこの同じ問題に遭遇しました。preserve-3d は、コードの特定の深くネストされたセクションでは効果がないようです。すべての親要素を微調整した後、犯人を見つけました!

overflow: hidden

この行はすべてを平らにします。

ここで試すことができます。http://www.webkit.org/blog-files/3d-transforms/transform-style.html 親クラスに overflow: hidden を追加すると、preserve-3d の効果がなくなります。

.parent {
    overflow: visible !important;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

問題を解決する必要があります。

于 2013-03-29T14:04:29.447 に答える
4

filter親要素への影響により、preserve-3d が無視されることがわかりました。

filter: blur()ビューアーから「離れて」回転するにつれて、アイテムを徐々にぼかすために使用していました。

フィルターを子要素に移動すると問題が解決しました!

于 2016-08-13T09:46:34.703 に答える
0

これを試してください-jsFiddle

私がやったこと：

.coin {
    background-image: url("http://www.coolemails4u.com/wp-content/uploads/2010/10/indian_rupee.png");
    background-size: 100% 100%;
    border-radius: 100%;
    height: 100px;
    margin: 50px auto;
    position: relative;
    width: 100px;
    -webkit-transition: .5s linear;
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden; /* I added this */
}

それが役立つことを願っています！

于 2012-07-26T21:45:10.793 に答える