7

AndroidのWebkitブラウザで3D変換（具体的にはY軸の回転）を実装するのに問題があります。私の実装は次の例に似ています。http：//desandro.github.com/3dtransforms/examples/card-01.html divがめくられますが、divの裏側は常にあるため、効果がない-webkit-transform: rotateY( 180deg );ようです。-webkit-backface-visibility: hidden;見える。4.1を実行しているAndroidエミュレータのスクリーンショットは次のとおりです。

フロントディビジョンはどこにありますか？

ここで何が起こっているのですか？この例は、iOSサファリで正常に機能しています。これは既知のAndroidバグですか、これを回避する方法はありますか？

4

3 に答える 3

3

Chrome/WinXP でもこのバグを経験しました。
回避策として次の方法を使用できます。

HTML

<div id="container">
    <div class="card" id="card1">1</div>
    <div class="card" id="card2">2</div>
</div>

CSS

.card {
    width: 150px;
    height: 200px;

    position: absolute;
    top: 50px;
    left: 50px;

    color: #FFF;
    font-size: 100px;
    text-align: center;
}

#card1 {
    background-color: #F00;
    z-index: 1;
}

#card2 {
    background-color: #00F;
    z-index: 0;
    -webkit-transform: rotateY(-180deg);
}

#container {
    -webkit-perspective: 700px;
}

#container #card1 {
    -webkit-transition: -webkit-transform .5s linear, z-index 0s .25s linear;
}

#container #card2 {
    -webkit-transition: -webkit-transform .5s linear, z-index 0s .25s linear;
}

#container:hover #card1 {
    z-index: 0;
    -webkit-transform: rotateY(180deg);
}

#container:hover #card2 {
    z-index: 1;
    -webkit-transform: rotateY(0deg);
}
​

z-index スワップのタイミングを計るために線形イージングを使用しています。
パースペクティブを少しいじる必要があるかもしれません。

JsFiddle: http://jsfiddle.net/dwUvR/3/

于 2012-12-23T22:57:39.843 に答える
3

回転に合わせて translateZ を追加してみてください。

したがって、ストレートアップカードは次のとおりです。

-webkit-transform: rotateY(0deg) translateZ(2px);

そして裏返されたカードは：

-webkit-transform: rotateY(180deg) translateZ(-2px);

カードの両面で裏面の可視性が非表示のままであるため、深度の競合は発生しません。

于 2012-12-18T21:18:53.423 に答える
0

このバグが私のコルドバアンドロイドアプリで報告されていた..彼らは4.1.2..gs2..にあった..genymotionにそれをインストールし、裏返したときに裏側のインデックスを表側よりも高くなるように変更した..そしてそれ動作します。このように1年間壊れています。:\

于 2014-12-22T23:26:11.063 に答える