6

私は使用するためにトレイを使用しています：

 -webkit-transform: translate3d(0,500px,300px);

XプロパティとYプロパティは正常に機能しますが、Z（300px）は機能しません。これがjfiddleです。私は何が間違っているのですか？Chrome24とCanary25の両方を試しました。サポートに感謝します...

4

2 に答える 2

3

WebKitブログによると、

translate3d（x、y、z）、translateZ（z）要素をx、y、zに移動し、要素をzに移動するだけです。正のzは視聴者に向かっています。xやyとは異なり、z値をパーセンテージにすることはできません。

効果を得るには、葯の要素が必要です。コードにいくつか追加しました。

HTML

<div class="coin1">
    <div class="coin2"></div>
</div>

CSS

.coin1{
    position:absolute;
    top:50px;
    left:50px;
    width:80px;
    height:40px;
    background:#fc0;
    -webkit-transform: rotate3d(1,0,0,-55deg) rotate3d(0,0,1,30deg);
    -webkit-transform-style: preserve-3d;
}

.coin1 .coin2
{
    background:#444;
    width:inherit;
    height:inherit;
    -webkit-transform: translate3d(0,0,150px);
}

動作しているようで、JSFiddleはここにあります。

率直に言って、私はtranslate3dについてあまり知識がありませんが、最近、CSS3の学習中にCSS3変換に関するいくつかのリンクを見つけました。

于 2013-01-26T15:14:27.797 に答える
3

親要素に-webkit-perspectiveパラメーターがありませんでした。これを追加すると、正常に動作し始めました。

于 2013-01-27T14:04:22.847 に答える