试图在CSS动画div上获得一个轻微的页面卷曲框阴影

Question

我希望在一个有悬停动画的div上获得一个漂亮的页面提升/卷曲，这样即使在div动画化的时候，轻微的页面角卷曲也会保持不变。我尝试使用/包含来自http://www.paulund.co.uk/creating-different-css3-box-shadows-effects但效果根本没有显现出来。使用：before pseudo时，不会显示任何内容。我把z指数设置为100，看看它是否以某种方式被埋葬了，但仍然什么都没有。如果我尝试在不使用的情况下使用：before进行，我会得到额外的阴影，但它拒绝转换，只是挂在底部。有人能建议一种方法让这个页面卷曲显示出来吗？使用Paulund（Paul Underwood）的代码，我试图在我的div上实现"Effect 3"；左下角轻微抬高，其余部分边缘有一个基本的柔和阴影。

.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>