あなたのキモチ つなげるカタチ

TOP > CSS > 【CSS】ホバー時に画像を斜めに傾けて立体的に表現するテクニック/To obliquely tilt the image when hover to express it three-dimensionally

【CSS】ホバー時に画像を斜めに傾けて立体的に表現するテクニック/To obliquely tilt the image when hover to express it three-dimensionally

スポンサーリンク

コーディングテクニックの実装内容

画像をホバーした時に立体的に傾けるテクニックを紹介します。

実装所要時間:10分程度

CSS,JavaScriptの記述内容

.block {
  width: 300px;
  margin: 70px auto 0;
}

.block a {
  display: block;
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.block a .box {
  position: relative;
  padding-top: 62.5%;
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.block a .box:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  transform: translateX(0) translateY(0);
  background: #000;
}

.block a .img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: url(/img/a.jpg) no-repeat center center;
  background-size: cover;
}

.block a:hover {
  perspective: 1000px;
}
.block a:hover .box {
  transform: rotateX(30deg) rotateY(-20deg) rotateZ(5deg);
}

.block a:hover .box:after {
  transform: translateX(20px) translateY(20px);
}

@media screen and (max-width:640px){
  .block {
    width: 100%;
  }
}

実装のポイント

  • 1) aタグ内にdivを2つ作成
  • 2) 外側のdivはpadding-topで高さを確保。内側は画像用のdivとしてposition: absolute;を指定。画像はbackground-imageでにbackground-size: cover;を指定
  • 3) 外側のdivの:afterに縦横100%で背景色を指定する。:hoverする前は画像用のdivの下に完全に隠す
  • 4) aタグを:hover時に外側のdivと:afterにそれぞれtransformを付与して斜めに傾ける。:afterにはtranslateX() translateY()を指定して画像用のdivから距離を離す

スポンサーリンク

「【CSS】ホバー時に画像を斜めに傾けて立体的に表現するテクニック/To obliquely tilt the image when hover to express it three-dimensionally」への1件のフィードバック

コメントは受け付けていません。