7

に設定されている親コンテナがあるとしましょう

-webkit-transform: perspective(300px) rotateX(45deg);
-webkit-transform-origin: 50% 100% 0%;

その中には、そのスタイリングをしたくないアイテムがたくさんあります。私は何をしなければなりませんか？変換値を 0 に設定しますか? お気に入り

 -webkit-transform: perspective(0px) rotateX(0deg);
-webkit-transform-origin: 0% 0% 0%;

私はここにサンプルjsfiddleを持っています: http://jsfiddle.net/8cUPL/1/

4

3 に答える 3

2

およびその他のレンダリング関連のtransform-*プロパティはopacity、CSS の継承の意味で「継承」しません。代わりに、すべての子孫を含む要素全体に視覚的な変更を適用します。これらの子孫に次のようなものを適用transform: none;しても、目に見える効果はありません。これらの要素はそれ自体では変換されず、親要素とともに変換されることを意味するだけです — スタイルを「継承」しているからではなく、パーツであるためです。その外観の。

子孫の親要素の変換を視覚的に「元に戻す」(つまり、変換されていないように見せる) 唯一の方法は、この変換の結果が特定の視点から見た場合と同じように見えるように具体的に変換することです。まったく変換せずに見てください。これを可能にするには、変換された要素自体と、指定された要素のすべての中間の祖先がtransform-style: preserve-3d. 必要な「補正」変換は、結果の 3D シーンから計算するか、試行錯誤によって変換値を調整することによって構築できます。

.items{
    ...
    transform: translate3d(-51px, 11px, 29px) rotateX(-45deg);
    transform-origin: 50% 100% 0px;
}

( JSfiddleを参照)。

残念ながら、この回避策は と互換性がありません。これは、 (他のいくつかのプロパティoverlow:hiddenと共に) 効果的に を削除するためです。したがって、変換された要素のオーバーフロー部分をクリップし、同時にその部分の変換を「元に戻す」必要がある場合、適切な唯一の解決策は、この部分が子孫にならないようにコードを編成することです。変換された要素の。transform-style: preserve-3d

于 2017-01-06T13:16:32.373 に答える
1

アイテムが透視されたコンテナの一部ではないかのように動作することを意味しますか? いいえ、それはできません。

ただし、Javascript を少し使用して、コンテナーからアイテムを取り出し、DOM ツリーの別の場所に配置することができます。その後、彼らは視点から解放されます。

var container = document.getElementById('container');
var items = container.getElementsByClassName('items');
for (var i = items.length-1; i>=0; --i) {
    var el = items[i].cloneNode(true);
    var itemparent = items[i].parentNode;
    itemparent.removeChild(items[i]);
    container.parentNode.insertBefore(el, container);
}

フィドル

于 2013-08-14T07:50:48.397 に答える
0

perspectiveとそのは-origin、実際にはそれ自体では何もしません。子要素の変換を削除するには、次のtransformようにリセットします。

transform: none;
于 2017-01-06T09:34:25.293 に答える