2

In this Link I have a div which rotates on hover and I want to know if it's possible to use :before or :after to act as a shadow. In the example the :before element gets transformed with the div and comes on top even though it has a negative z-index. I would like it to rest behind without any transformation.

It is all about css, the html is just two div, one container for perspective and the 'card' being transformed.

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

About compatibility, This is a webkit only experiment I'm trying to achieve.

olanod
  • 30,306
  • 7
  • 46
  • 75

1 Answers1

0

Check this answer: Z-index with before pseudo-element

:before and :after pseudo-elements are by definition inside the associated element, so it's impossible to place them outside (behind) the associated element.

You will have to go with a second element (like a <div id="shadow">) inserted before your <div id="card">.

Community
  • 1
  • 1
albertedevigo
  • 18,262
  • 6
  • 52
  • 58