2

私は以下のことを達成しようとしています..そして、Firefoxではかなりうまく機能しますが、同じcss

Firefox での期待される結果

クロムでの作業は、以下に示すようなものです

Chrome のスクリーンショット

-webkit-transform-origin: 50% 100%;クロムまたはその機能では機能しないと思いますが、期待どおりではありません

デモ Jsfiddle

#flyDiv {
    width:720px;
    height:420px;
    transform-origin: 50% 100%;
    perspective: 300;
    transform: perspective(300px) rotateX(15deg);
    -webkit-transform: perspective(300px) rotateX(15deg);
}
4

2 に答える 2

2

おそらく私はエラーを発見しました..これは私が多くのコンピュータでチェックしたハードウェアの問題であり、グラフィックカードが存在するPCはそのままスムーズに実行できることがhardware acceleratedわかりました..それ以外の場合は傾斜が異なりますsoftware accelerated。 .

アドレスバーであなたのPC設定をチェックするだけchrome://gpuで、差分が見つかります

次の画像は、正常に実行されているものです... ハードウェア アクセラレーション PC

次の画像は、期待どおりに実行されていないものです... ソフトウェア アクセラレーション PC

とにかく、あなたの答えとコメントをありがとう..可能であればチェックしてこれを確認してください..ありがとう

于 2013-08-05T06:09:11.373 に答える
0

親要素でtransform-style: preserve-3dを使用する必要がある正しい方法でそれを行っていない場合、子を変換できます。また、パフォーマンスを向上させるために 3D を使用しているため、 backface-visibility: hidden;が必要になります。

-webkit-transform-origin: 50% 100%;LEA VEROU のユーザー プレフィックスを使用するか、または使用する必要があります。

http://leaverou.github.io/prefixfree/

親：

 section#transform3d{
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;       
        }

子

#flyDiv {
    width:720px;
    height:420px;
    -webkit-transform-origin: 50% 100%;
    -moz-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-perspective: 300px;
    -moz-perspective: 300px;
    perspective: 300px;

    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    /*  -webkit-transition: -webkit-transform 10s; 
    -webkit-transform-origin: 50% 100%; */
    -webkit-transform: perspective(300px) rotateX(15deg);
    -moz-transform: perspective(300px) rotateX(15deg);
    transform: perspective(300px) rotateX(15deg);
}

デモ: http://jsfiddle.net/kougiland/W9uPE/6/

ここで詳細をお読みください: http://www.w3.org/TR/css3-transforms/

于 2013-08-03T09:25:50.567 に答える