CSSでホバー位置によって要素を傾けるチルトエフェクトを実装する方法

Tips

CSSでホバー位置によって要素を傾けるチルトエフェクトを実装する方法

チルトエフェクトと呼ばれる、イメージにホバーするとマウス(カーソル)の位置によってイメージが傾く動きをCSSのみで実装したものです。
普段こういった動きを実装する場合はJavaScriptを使っていますが、ふとCSSだけでできないかなと思って試してみたので備忘録です。

チルトエフェクトやホバーで傾くと言われても動きにピンとこないという人は、以下のデモで実際にイメージをホバーをしてみてください。

※動きはPCで確認してください。

See the Pen Pure CSS hover tilt effect by Naoya (@nxworld) on CodePen.

まずHTMLは下記のようなものを使用します。
実際に表示させ傾けたい要素は.box-contentsになり、その上にある.hover-pointはそれぞれどこがホバーされているかの判別に使う要素になります。

HTML

<div class="box">
  <div class="hover-point"></div>
  <div class="hover-point"></div>
  <div class="hover-point"></div>
  <div class="hover-point"></div>
  <div class="hover-point"></div>
  <div class="hover-point"></div>
  <div class="hover-point"></div>
  <div class="hover-point"></div>
  <div class="box-contents"></div>
</div>

次にCSSは下記のように記述します。

CSS

.box {
  position: relative;
  width: 300px;
  height: 300px;
}
.box-contents {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url(image.jpg) 50% 50% / cover no-repeat;
  box-shadow: 0 0 50px rgba(0, 0, 0, .3);
  transition: .5s ease;
}
.hover-point {
  position: absolute;
  z-index: 2;
  width: calc(100% / 3);
  height: calc(100% / 3);
}
.hover-point:nth-child(1) {
  top: 0;
  left: 0;
}
.hover-point:nth-child(2) {
  top: 0;
  left: calc(100% / 3);
}
.hover-point:nth-child(3) {
  top: 0;
  right: 0;
}
.hover-point:nth-child(4) {
  top: calc(100% / 3);
  left: 0;
}
.hover-point:nth-child(5) {
  top: calc(100% / 3);
  right: 0;
}
.hover-point:nth-child(6) {
  bottom: 0;
  left: 0;
}
.hover-point:nth-child(7) {
  bottom: 0;
  left: calc(100% / 3);
}
.hover-point:nth-child(8) {
  bottom: 0;
  right: 0;
}
.hover-point:nth-child(1):hover ~ .box-contents {
  box-shadow: 15px 15px 50px rgba(0, 0, 0, .3);
  transform-origin: right top;
  transform: perspective(1000px) rotateX(10deg) rotateY(-10deg) rotateZ(2deg);
}
.hover-point:nth-child(2):hover ~ .box-contents {
  box-shadow: 0 15px 50px rgba(0, 0, 0, .3);
  transform-origin: center top;
  transform: perspective(1000px) rotateX(10deg);
}
.hover-point:nth-child(3):hover ~ .box-contents {
  box-shadow: -15px 15px 50px rgba(0, 0, 0, .3);
  transform-origin: left top;
  transform: perspective(1000px) rotateX(10deg) rotateY(10deg) rotateZ(-2deg);
}
.hover-point:nth-child(4):hover ~ .box-contents {
  box-shadow: 15px 5px 50px rgba(0, 0, 0, .3);
  transform-origin: left center;
  transform: perspective(1000px) rotateY(-10deg);
}
.hover-point:nth-child(5):hover ~ .box-contents {
  box-shadow: -15px 5px 50px rgba(0, 0, 0, .3);
  transform-origin: right center;
  transform: perspective(1000px) rotateY(10deg);
}
.hover-point:nth-child(6):hover ~ .box-contents {
  box-shadow: 15px -15px 50px rgba(0, 0, 0, .3);
  transform-origin: right bottom;
  transform: perspective(1000px) rotateX(-10deg) rotateY(-10deg) rotateZ(-2deg);
}
.hover-point:nth-child(7):hover ~ .box-contents {
  box-shadow: 0 -15px 50px rgba(0, 0, 0, .3);
  transform-origin: center bottom;
  transform: perspective(1000px) rotateX(-10deg);
}
.hover-point:nth-child(8):hover ~ .box-contents {
  box-shadow: -15px -15px 50px rgba(0, 0, 0, .3);
  transform-origin: left bottom;
  transform: perspective(1000px) rotateX(-10deg) rotateY(10deg) rotateZ(2deg);
}

.box.box-contentsは表示したいコンテンツに合わせて任意で調整し、動きの実装のポイントとなる.hover-pointは縦横共に表示させたいコンテンツの3分の1のサイズにして、下のキャプチャのような感じでそれぞれ配置していきます。

ホバーポイント

あとは、間接セレクタを用いてそれぞれの.hover-pointにホバーした際に.box-contentsに異なるスタイルを適用させるようにすれば、上にあるデモのようにマウス(カーソル)の位置によってイメージが傾く動きを実装できます。
傾き具合を調整したい場合は、transformで指定している各値を変更することで調整が可能です。


もう少しシンプルにできそう感ありますし、HTMLがごちゃごちゃしてしまうのがあれですが、CSSでもそれっぽい動きになっているかなとは思います。
もっと良い感じの実装方法とか思いつく方いれば、CodePenのForkなど通じて是非共有してください。

Posted on

Category : Tips

Close the search window,
please press close button or esc key.