Попытка получить небольшую тень от скручивания страницы на CSS-анимированном элементе div

Question

То, что я надеюсь сделать, - это получить один из тех приятных подъемов / скручиваний страниц в div, который имеет анимацию при наведении, так что небольшой скручивание угла страницы остается в div, даже когда он анимируется. Я пытался использовать / включая примеры кода из http://www.paulund.co.uk/creating-different-css3-box-shadows-effects но эффект не отображается вообще. При использовании псевдо:before ничего не отображается. Я установил z-index на 100, чтобы увидеть, может быть, он как-то похоронен и все еще ничего. Если я пытаюсь сделать это без использования:before, я получаю дополнительную тень, но она отказывается трансформироваться, просто висит там внизу. Может кто-нибудь предложить способ заставить эту страницу показывать локон? Используя код Паулунда (Пола Андервуда), я пытаюсь достичь "Эффекта 3" на моем div; нижний левый небольшой подъем угла страницы, в то время как остальная часть имеет мягкую тень по краям.

.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

Я думаю, что проблема с вашим подходом сводится к тому, чтобы складывать контексты. Помещение преобразования в заметку в состоянии покоя создает новый контекст стека, который выбрасывает псевдоэлемент.

Мне пришлось завернуть заметку в дополнительный div, чтобы заставить ее работать - и я применяю преобразования к ней вместо самой заметки. Я убрал границу, чтобы усилить эффект перевернутого угла.

Вот код:

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>