Trying to get a slight page curl box shadow on CSS-animated div

Question

What I'm hoping to do is get one of those nice page lifts/curls on a div that has a hover animation, so that the slight page corner curl stays with the div even as it animates. I've tried using/including code examples from http://www.paulund.co.uk/creating-different-css3-box-shadows-effects but the effect doesn't show at all. When using the :before pseudo, nothing shows. I set the z-index to 100 to see if maybe it was somehow getting buried and still nothing. If I try to do it without using :before, I get the extra shadow but it refuses to transform, just hanging there at the bottom. Can anyone suggest a way to get this page curl to show? Using Paulund's (Paul Underwood) code, I'm trying to achieve "Effect 3" on my div; a bottom left slight lifting of the page corner, while the rest has a basic soft shadow around the edges.

.note {
  width: 160px;
  height: 160px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .25);
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, .25);
  -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, .25);
  float: left;
  margin: 30px;
  padding: 10px;
  border: 1px solid rgba(0, 0, 0, .25);
}
.sticky0 {
  transform: rotate(-3.5deg);
  -webkit-transform: rotate(-3.5deg);
  -moz-transform: rotate(-3.5deg);
  background-color: white;
}
.note:hover {
  /*	border: 1px solid rgba(0,0,0,.75); */
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  transform: scale(1.2);
  z-index: 100;
  position: relative;
}
.note {
  -transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -webkit-transition: all .2s ease-in-out;
  cursor: pointer;
  display: block;
}

<div class="note sticky0">
  TEST
  <div>

Answer 1

I think the problem with your approach is down to stacking contexts. Putting the transform on the note in the resting state creates a new stacking context which throws the pseudo-element out.

I've had to wrap the note in an extra div to get it to work - and I'm applying the transforms to that instead of the note itself. I've removed the border to amplify the upturned corner effect.

Here is the code:

body {
  background-color: #EEE;
}

.twirl {
  position: absolute;
  -transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -webkit-transition: all .2s ease-in-out;
  transform: rotate(-3.5deg);
  -webkit-transform: rotate(-3.5deg);
  -moz-transform: rotate(-3.5deg);
}

.twirl:hover {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  transform: scale(1.2);
}

.note {
  position: relative;
  width: 160px;
  height: 160px;
  float: left;
  margin: 30px;
  padding: 10px;
  background-color: white;
  cursor: pointer;
}

.note:before {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 12px;
  left: 3px;
  width: 50%;
  top: 80%;
  max-width:80px;
  background: #777;
  box-shadow: 0 15px 10px #777;
  transform: rotate(-3deg);
}

<div class="twirl">
  <div class="note">TEST<div>
</div>