0

私が望んでいるのは、ホバー アニメーションがある div でこれらの素敵なページ リフト/カールの 1 つを取得することです。これにより、わずかなページ コーナーのカールが、アニメーション化されても div にとどまります。http://www.paulund.co.uk/creating-different-css3-box-shadows-effectsのコード例を使用/含めてみましたが、効果がまったく表示されません。:before 疑似を使用すると、何も表示されません。z-index を 100 に設定して、何らかの形で埋もれていて、まだ何もないかどうかを確認しました。せずにやろうとしたら:before を使用して、余分な影を取得しますが、変換を拒否し、下部にぶら下がっています。このページのカールを表示する方法を提案できる人はいますか? 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 に答える