html - 尝试在 CSS 动画 div 上获得轻微的页面 curl 框阴影

Question

我希望做的是在具有悬停动画的 div 上获得那些漂亮的页面提升/ curl 之一，这样轻微的页面 Angular curl 就会在 div 动画时保持不变。我尝试使用/包括来自 http://www.paulund.co.uk/creating-different-css3-box-shadows-effects 的代码示例但效果根本没有表现出来。使用 :before 伪时，什么也没有显示。我将 z-index 设置为 100 以查看它是否以某种方式被掩埋但仍然没有。如果我尝试不使用 :before 来做到这一点，我会得到额外的阴影，但它拒绝转换，只是卡在底部。任何人都可以建议一种方法来显示此页面 curl 吗？使用 Paulund (Paul Underwood) 的代码，我试图在我的 div 上实现“效果 3”；左下角略微抬起页面 Angular ，而其余部分在边缘周围有一个基本的柔和阴影。

.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 中以使其正常工作 - 我将转换应用到它而不是笔记本身。我移除了边框以放大上翘的边 Angular 效果。

代码如下:

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>