css - :before/:after 疑似要素は親で変換されません

Question

このリンクでは、ホバー時に回転する div があり、:before または :after を使用して影として機能できるかどうかを知りたいです。この例では、:before 要素が div で変換され、負の z-index を持っていても一番上に表示されます。変形せずにそのままでいてほしい。

それはすべてcssに関するもので、htmlは2つのdiv、パースペクティブ用の1つのコンテナー、および変換される「カード」です。

<div id="container">
    <div id="card"></div>
</div>

互換性について、これは私が達成しようとしている webkit のみの実験です。

Answer 1

この回答を確認してください: Z-index with before pseudo-element

:before および :after 疑似要素は、定義上、関連付けられた要素内にあるため、関連付けられた要素の外 (後ろ) に配置することはできません。

の前に2 番目の要素 ( など<div id="shadow">) を挿入する必要があります<div id="card">。