営業ナシでWeb制作案件が舞い込んでくる”新世代”戦略 ▶︎

【未だかつてない】『transform translate3d』で100倍リアルなCSS画像アニメーション

今回はtransform translate3dで100倍リアルなCSS画像アニメーションをご紹介。回転します。拡大します。超動きます。
htmlとcssだけしか使っていません。
コードの説明や実際の動きも詳しくまとめてみたので自由にお使いください。

こちらのアニメーション/エフェクトのコードはすべて完全オリジナルなのでコピペ大歓迎です。

この記事の目次

回転しながら画像のサイズが拡大するhoverアニメーション 

  1. アニメーション動作の確認
  2. コードの確認
  3. このアニメーションのポイント!


1. 3D画像が2D画像に変化するシンプルなhoverアニメーション

まずはアニメーションの動作から確認していきましょう

アニメーション動作の確認

動きは下の画像のような感じになります

 

実際の動きはこちら

 

コードの確認

 

<div class="container">
  <div class="image1">
    <img src="https://source.unsplash.com/1000x800" style="background-size:cover;" class="img" alt="">
  </div>
  <div class="image2">
    <img src="https://source.unsplash.com/1000x801" style="background-size:cover;" class="img" alt="">
  </div>
  <div class="image3">
    <img src="https://source.unsplash.com/1000x802" style="background-size:cover;" class="img" alt="">
  </div>
  <div class="image4">
    <img src="https://source.unsplash.com/1000x803" style="background-size:cover;" class="img" alt="">
  </div>
</div>
.container {
  width: 100%;
  min-height: 100vh;
}
.image1 {
  /* 3D変形の奥行きの指定 */
  perspective: 3000px;
  width: 35%;
  position: absolute;
  left: 35%;
  top:45%;
  /* 画像の位置調整 */
  transform: translate(-50%, -50%);
  /* 要素の3D指定 */
  transform-style: preserve-3d;
}
.image1 img {
  /* 画像の回転・3D角度調整 */
  transform: rotateX(50deg) rotateZ(-30deg) translate3d(-20px, -20px, 30px);
  /* 3D感を出すためにbox-shadowを指定 */
  box-shadow: -30px 30px 15px 5px rgba(0,0,0,0.4);
  /* アニメーションの速度調整 */
  transition: all 1.0s;
  transform-style: preserve-3d;
  width: 50%;
  height: 50%;
}
.image1:hover img {
    /* hover後の画像サイズ拡大の調整 */
  width: 65%;
  /* hover後の画像の回転・3D角度調整 */
  transform: rotateX(-340deg) rotateZ(0deg) translate3d(0px, 0px, 0px);
  /* hover後の影の打ち消し */
  box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
}
.image2 {
  /* 3D変形の奥行きの指定 */
  perspective: 3000px;
  width: 35%;
  position: absolute;
  left: 65%;
  top:45%;
  /* 画像の位置調整 */
  transform: translate(-50%, -50%);
  /* 要素の3D指定 */
  transform-style: preserve-3d;
}
.image2 img {
  /* 画像の回転・3D角度調整 */
  transform: rotateX(50deg) rotateZ(-30deg) translate3d(-20px, -20px, 30px);
  /* 3D感を出すためにbox-shadowを指定 */
  box-shadow: -30px 30px 15px 5px rgba(0,0,0,0.4);
    /* アニメーションの速度調整 */
  transition: all 1.0s;
  transform-style: preserve-3d;
  width: 50%;
  height: 50%;
}
.image2:hover img {
  /* hover後の画像サイズ拡大の調整 */
  width: 65%;
    /* hover後の画像の回転・3D角度調整 */
  transform: rotateX(-340deg) rotateZ(0deg) translate3d(0px, 0px, 0px);
    /* hover後の影の打ち消し */
  box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
}
.image3 {
  /* 3D変形の奥行きの指定 */
  perspective: 3000px;
  width: 35%;
  position: absolute;
  left: 35%;
  top:85%;
  /* 画像の位置調整 */
  transform: translate(-50%, -50%);
  /* 要素の3D指定 */
  transform-style: preserve-3d;
}
.image3 img {
  /* 画像の回転・3D角度調整 */
  transform: rotateX(50deg) rotateZ(-30deg) translate3d(-20px, -20px, 30px);
  /* 3D感を出すためにbox-shadowを指定 */
  box-shadow: -30px 30px 15px 5px rgba(0,0,0,0.4);
    /* アニメーションの速度調整 */
  transition: all 1.0s;
  transform-style: preserve-3d;
  width: 50%;
  height: 50%;
}
.image3:hover img {
  /* hover後の画像サイズ拡大の調整 */
  width: 65%;
    /* hover後の画像の回転・3D角度調整 */
  transform: rotateX(-340deg) rotateZ(0deg) translate3d(0px, 0px, 0px);
    /* hover後の影の打ち消し */
  box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
}
.image4 {
  /* 3D変形の奥行きの指定 */
  perspective: 3000px;
  width: 35%;
  position: absolute;
  left: 65%;
  top: 85%;
  /* 画像の位置調整 */
  transform: translate(-50%, -50%);
  /* 要素の3D指定 */
  transform-style: preserve-3d;
}
.image4 img {
  /* 画像の回転・3D角度調整 */
  transform: rotateX(50deg) rotateZ(-30deg) translate3d(-20px, -20px, 30px);
  /* 3D感を出すためにbox-shadowを指定 */
  box-shadow: -30px 30px 15px 5px rgba(0,0,0,0.4);
    /* アニメーションの速度調整 */
  transition: all 1.0s;
  transform-style: preserve-3d;
  width: 50%;
  height: 50%;
}
.image4:hover img {
  /* hover後の画像サイズ拡大の調整 */
  width: 65%;
    /* hover後の画像の回転・3D角度調整 */
  transform: rotateX(-340deg) rotateZ(0deg) translate3d(0px, 0px, 0px);
    /* hover後の影の打ち消し */
  box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
}

ここがポイント!
  1. 画像4つ各々にスタイルを指定していく
  2. transfromプロパティとbox-shadowを使って画像を3Dに変形
  3. hover時にそれらを打ち消すことで2D画像に変化
  4. hover前後でtransform : rotateX() rotateZ() translate3d()の値を変化させ回転させる
  5. transitionプロパティを指定することで滑らかなアニメーションを実現

 


まとめ

HTMLとCSSを使うと今回紹介したようなことも簡単にできてしまうんです。

 

『CSSアニメーションやエフェクトだけではなくWebサイトをゼロから作って稼いでいきたい』

『3ヶ月くらいで最低でも月10万円は稼ぎたい』

『営業とかやったことないけどWeb制作だけで稼いでいきたい』

 

こんな方のためにWeb制作で月80万超稼ぐ筆者が自身の経験を踏まえて【失敗しない】Webデザイナー(Web制作)独学ロードマップを執筆しました。

 

少額の投資で3ヶ月後には月10〜30万稼げるよう設計してあります。
(学習教材やAdobeなど最低限のコストはかかります)

 

ロードマップの構成
  1. Web制作に特化した『確実に身に付く』学習方法
  2. Web制作会社が喰いつく理想的なポートフォリオの作成手順
  3. 返信率10%以上!Web制作会社へのメール営業

 

有料公開も考えましたが「Webデザイナー(Web制作)はまだまだ稼げることを証明したい!」という思いが強く、期間限定で無料公開をすることにしました。

 

2021年半ばまでは無料公開する予定ではありますが前倒しすることもあり得ますのでご興味ある方はお早めにどうぞ!