0

我希望做的是在具有悬停动画的 div 上获得那些不错的页面提升/卷曲之一，这样即使在动画时，轻微的页面角卷曲也会与 div 保持一致。我尝试使用/包含来自http://www.paulund.co.uk/creating-different-css3-box-shadows-effects的代码示例，但效果根本没有显示。使用 :before 伪时，没有任何显示。我将 z-index 设置为 100 以查看它是否可能以某种方式被掩埋，但仍然一无所获。如果我尝试不这样做使用：之前，我得到了额外的阴影，但它拒绝变形，只是挂在底部。任何人都可以建议一种方法来显示此页面卷曲吗？使用 Paulund (Paul Underwood) 的代码，我试图在我的 div 上实现“效果 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>

4

1 回答 1

2

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

我不得不将便笺包装在一个额外的 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>

于 2015-12-29T13:59:53.397 回答