css - :before/:after 伪元素不随父元素转换

Question

在此链接中，我有一个在悬停时旋转的 div，我想知道是否可以使用 :before 或 :after 来充当阴影。在示例中，:before 元素与 div 一起转换并出现在顶部，即使它的 z-index 为负。我希望它在没有任何转变的情况下休息。

这都是关于 css 的，html 只是两个 div，一个用于透视的容器和正在转换的“卡片”。

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

关于兼容性，这是我试图实现的仅 webkit 实验。

Answer 1

检查这个答案：Z-index with before pseudo-element

:before 和 :after 伪元素根据定义位于关联元素内部，因此不可能将它们放在关联元素的外部（后面）。

您必须在 .<div id="shadow">之前插入第二个元素（如 a ）<div id="card">。