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

Question

我希望做的是在具有悬停动画的 div 上获得那些漂亮的页面 lifts/curls 之一，这样轻微的页面角卷曲就会与 div 即使它有动画。我已经尝试了 using/including 来自 http://www.paulund.co.uk/creating-different-css3-box-shadows-effects 的代码示例，但效果根本没有显示出来。使用 :before 伪时，什么也没有显示。我将 z-index 设置为 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

我认为您的方法的问题在于堆叠上下文。将转换放在静止状态下的音符上会创建一个新的堆叠上下文，它会抛出 pseudo-element。

我不得不将音符包裹在一个额外的 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>

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

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

html

css

css-transitions

box-shadow