チルトエフェクトやホバーで傾くと言われても動きにピンとこないという人は、以下のデモで実際にイメージをホバーをしてみてください。
※動きはPCで確認してください。
まず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など通じて是非共有してください。