マテリアルデザインを1分で実装！CSSスライダーアニメーション３選【transform編】

今回はtransformを使用したそのまま使えるスライダーアニメーションのマテリアルデザインを３つご紹介します。

シンプルなデザインに加えて、translateやrotate、box-shadowも適宜使用することで様々な場面（Web制作やWebアプリケーションなど）で利用できるデザインとなっています。

マテリアルデザインなのでそのまますぐにでもコピペして使用できるように仕上げました。

htmlとcssだけしか使っていません。
コードの説明や実際の動きも詳しくまとめてみたので自由にお使いください。

こちらのデザイン・コードはすべて完全オリジナルなのでコピペ大歓迎です。

この記事の目次

transformエフェクトを使用したスライダーアニメーションでつくるCSSマテリアルデザイン３選

hoverで画像が斜めに動くサイト制作で便利なスライダーアニメーション
hoverで画像がゼリーみたいに揺れるおもしろスライダーアニメーション
まるで触れられそうな3D画像のスライダーアニメーション

『なんと0円のプログラミングスクールで『近道する』という裏技があります』
＊2020年9月8日更新

ProEngineer(プログラマカレッジ)では完全無料でプログラミング講座を受講できます。しかも、プロの講師がいつでも質問に答えてくれる環境です。有料のスクールに通うと50万円以上かかるところでProEngineerなら0円という『神対応』。あなたがもしプログラミング初心者なら『エンジニアへの近道』として試してみるのが間違いナシです。

>>ProEngineer(プログラマカレッジ)を無料で受講する

１. hoverで画像が斜めに動くサイト制作で便利なスライダーアニメーション

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

実際の動きはこちらです

コードはこちら

コードを見る

<div id="picture">
  <!-- チェックボックス -->
  <input type="radio" name="picture" id="pic1" checked>
  <input type="radio" name="picture" id="pic2">
  <input type="radio" name="picture" id="pic3">
  <input type="radio" name="picture" id="pic4">
  <div id="bg-pic">
    <div class="inside">
      <div class="pic pic_1">
      </div>
      <div class="pic pic_2">
      </div>
      <div class="pic pic_3">
      </div>
      <div class="pic pic_4">
      </div>
    </div>
  </div>
  <!-- スライダーのナビゲーションボタン -->
  <div id="slide-buttons">
    <label for="pic1"></label>
    <label for="pic2"></label>
    <label for="pic3"></label>
    <label for="pic4"></label>
  </div>
</div>

#picture {
   margin: 0 auto;
   width: 500px;
   max-width: 100%;
   text-align: center;
}
#picture input[type=radio] {
   display: none;
}
#picture label {
   cursor:pointer;
   text-decoration: none;
   padding: 5px;
}
#bg-pic {
   background: #fff;
   position: relative;
   z-index: 1;
   width: 100%;
   overflow: hidden;
   /* ボックスのはみ打た部分を隠す */
   transform: translate(0px,0px);
   /* XY軸(横縦)への移動距離を指定 */
   transition-duration:.8s;
   /* アニメーションの開始から終了までの時間を指定 */
}
#bg-pic:hover {
  transform: translate(15px,-15px);
  /* XY軸(横縦)への移動距離を指定 */
}
#pic1:checked ~ #bg-pic .inside {
   margin-left: 0;
}
#pic2:checked ~ #bg-pic .inside {
   margin-left: -100%;
}
#pic3:checked ~ #bg-pic .inside {
   margin-left: -200%;
}
#pic4:checked ~ #bg-pic .inside {
   margin-left: -300%;
}
#bg-pic .inside {
   width: 400%;
   line-height: 0;
   height: 300px;
}
#bg-pic .pic {
   width: 25%;
   float:left;
   display: flex;
   justify-content: center;
   align-items: center;
   /* 上３行でボックスをど真ん中に指定 */
   height: 100%;
   background-size: cover;
}
#bg-pic .pic_1 {
   background-image: url("https://images.unsplash.com/photo-1473181488821-2d23949a045a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80");
}
#bg-pic .pic_2 {
   background-image: url("https://images.unsplash.com/photo-1442323794357-25b2ec110967?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80");
}
#bg-pic .pic_3 {
   background-image: url("https://images.unsplash.com/photo-1498550744921-75f79806b8a7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80");
}
#bg-pic .pic_4 {
   background-image: url("https://images.unsplash.com/photo-1476820865390-c52aeebb9891?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80");
}
/* スライダーの送りボタンを指定 */
#slide-buttons {
   margin: 30px 0 0;
   text-align: center;
}
#slide-buttons label {
   display: inline-block;
   width: 10px;
   height: 10px;
   border-radius:0%;
   background: gainsboro;
   margin: 0 10px;
   transform: scale(1,1);
   /* XY軸(横縦)の伸縮率を指定 */
   transition-duration:.5s;
   /* アニメーションの開始から終了までの時間を指定 */
}
#slide-buttons label:hover {
  transform: scale(1.5,1.5);
  /* XY軸(横縦)の伸縮率を指定 */
}
#pic1:checked ~ #slide-buttons label:nth-child(1),
#pic2:checked ~ #slide-buttons label:nth-child(2),
#pic3:checked ~ #slide-buttons label:nth-child(3),
#pic4:checked ~ #slide-buttons label:nth-child(4) {
   background: #444;
}

ここがポイント！

flexboxでbg-picの中身をど真ん中に設置
スライダーのナビゲーションボタンを設置しボタンを押すと画像がスライドするように指定する
hoverするとtransform:translateで背景が斜め上に自然に動き出すそのままに使えるスライダーのマテリアルデザイン(transformの使い方については【transform完全網羅】hoverで動き出す！transformを網羅できるCSSボタンアニメーション16選)
transition-durationプロパティを指定して開始から終了までの自然なアニメーションを実現

２. hoverで画像がゼリーみたいに揺れるおもしろスライダーアニメーション

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

実際の動きはこちらです

コードはこちら

コードを見る

<div id="picture">
  <!-- チェックボックス -->
  <input type="radio" name="picture" id="pic1" checked>
  <input type="radio" name="picture" id="pic2">
  <input type="radio" name="picture" id="pic3">
  <input type="radio" name="picture" id="pic4">
  <div id="bg-pic">
    <div class="inside">
      <div class="pic pic_1">
      </div>
      <div class="pic pic_2">
      </div>
      <div class="pic pic_3">
      </div>
      <div class="pic pic_4">
      </div>
    </div>
  </div>
  <!-- スライダーのナビゲーションボタン -->
  <div id="slide-buttons">
    <label for="pic1"></label>
    <label for="pic2"></label>
    <label for="pic3"></label>
    <label for="pic4"></label>
  </div>
</div>

#picture {
   margin: 0 auto;
   width: 500px;
   max-width: 100%;
   text-align: center;
}
#picture input[type=radio] {
   display: none;
}
#picture label {
   cursor:pointer;
   text-decoration: none;
   padding: 5px;
}
#bg-pic {
   background: #fff;
   position: relative;
   z-index: 1;
   width: 100%;
   overflow: hidden;
   /* ボックスのはみ打た部分を隠す */
   transform: rotateY(0deg) scaleX(1);
   /* XY(横タテ)の回転角度と伸縮率を指定 */
   transition-duration:.8s;
   /* アニメーションの開始から終了までの時間を指定 */
}
#bg-pic:hover {
  transform: rotateY(30deg) scaleX(1.1);
  /* XY(横タテ)の回転角度と伸縮率を指定 */
}
#pic1:checked ~ #bg-pic .inside {
   margin-left: 0;
}
#pic2:checked ~ #bg-pic .inside {
   margin-left: -100%;
}
#pic3:checked ~ #bg-pic .inside {
   margin-left: -200%;
}
#pic4:checked ~ #bg-pic .inside {
   margin-left: -300%;
}
#bg-pic .inside {
   width: 400%;
   line-height: 0;
   height: 300px;
}
#bg-pic .pic {
   width: 25%;
   float:left;
   display: flex;
   justify-content: center;
   align-items: center;
   /* 上３行でボックスをど真ん中に指定 */
   height: 100%;
   background-size: cover;
}
#bg-pic .pic_1 {
   background-image: url("https://images.unsplash.com/photo-1473181488821-2d23949a045a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80");
}
#bg-pic .pic_2 {
   background-image: url("https://images.unsplash.com/photo-1442323794357-25b2ec110967?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80");
}
#bg-pic .pic_3 {
   background-image: url("https://images.unsplash.com/photo-1498550744921-75f79806b8a7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80");
}
#bg-pic .pic_4 {
   background-image: url("https://images.unsplash.com/photo-1476820865390-c52aeebb9891?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80");
}
/* スライダーの送りボタンを指定 */
#slide-buttons {
   margin: 30px 0 0;
   text-align: center;
}
#slide-buttons label {
   display: inline-block;
   width: 10px;
   height: 10px;
   border-radius:0%;
   background: gainsboro;
   margin: 0 10px;
   transform: scale(1,1);
   /* XY軸(横縦)の伸縮率を指定 */
   transition-duration:.5s;
   /* アニメーションの開始から終了までの時間を指定 */
}
#slide-buttons label:hover {
  transform: scale(1.5,1.5);
  /* XY軸(横縦)の伸縮率を指定 */
}
#pic1:checked ~ #slide-buttons label:nth-child(1),
#pic2:checked ~ #slide-buttons label:nth-child(2),
#pic3:checked ~ #slide-buttons label:nth-child(3),
#pic4:checked ~ #slide-buttons label:nth-child(4) {
   background: #444;
}

ここがポイント！

flexboxでbg-picの中身をど真ん中に設置
スライダーのナビゲーションボタンを設置しボタンを押すと画像がスライドするように指定する
hoverするとtransform:rotateYとscaleXが効いてゲームキャラみたいに動き出すスライダーのマテリアルデザインに仕上げた(transformの使い方については【transform完全網羅】hoverで動き出す！transformを網羅できるCSSボタンアニメーション16選)
transition-durationプロパティを指定して開始から終了までの自然なアニメーションを実現

３. まるで触れられそうな3D画像のスライダーアニメーション

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

実際の動きはこちらです

コードはこちら

コードを見る

<div id="picture">
  <!-- チェックボックス -->
  <input type="radio" name="picture" id="pic1" checked>
  <input type="radio" name="picture" id="pic2">
  <input type="radio" name="picture" id="pic3">
  <input type="radio" name="picture" id="pic4">
  <div id="bg-pic">
    <div class="inside">
      <div class="pic pic_1">
      </div>
      <div class="pic pic_2">
      </div>
      <div class="pic pic_3">
      </div>
      <div class="pic pic_4">
      </div>
    </div>
  </div>
  <!-- スライダーのナビゲーションボタン -->
  <div id="slide-buttons">
    <label for="pic1"></label>
    <label for="pic2"></label>
    <label for="pic3"></label>
    <label for="pic4"></label>
  </div>
</div>

#picture {
   margin: 0 auto;
   width: 500px;
   max-width: 100%;
   text-align: center;
}
#picture input[type=radio] {
   display: none;
}
#picture label {
   cursor:pointer;
   text-decoration: none;
   padding: 5px;
}
#bg-pic {
   background: #fff;
   position: relative;
   z-index: 1;
   width: 90%;
   overflow: hidden;
   /* ボックスのはみ打た部分を隠す */
   transform: rotateX(40deg) rotateZ(-20deg);
    /* 画像の角度調整 */
   box-shadow: -30px 30px 15px 5px rgba(0,0,0,0.4);
   /* ボックスに影をつける（左から水平方向の長さ、垂直方向の長さ、ぼかしの長さ、広がりの長さ、色） */
   transition-duration:.8s;
   /* アニメーションの開始から終了までの時間を指定 */
}
#bg-pic:hover {
  transform: rotateX(40deg) rotateZ(-20deg);
   /* 画像の角度調整 */
  box-shadow: -30px 30px 15px 5px rgba(0,0,0,0.4);
  /* ボックスに影をつける（左から水平方向の長さ、垂直方向の長さ、ぼかしの長さ、広がりの長さ、色） */
}
#pic1:checked ~ #bg-pic .inside {
   margin-left: 0;
}
#pic2:checked ~ #bg-pic .inside {
   margin-left: -100%;
}
#pic3:checked ~ #bg-pic .inside {
   margin-left: -200%;
}
#pic4:checked ~ #bg-pic .inside {
   margin-left: -300%;
}
#bg-pic .inside {
   width: 400%;
   line-height: 0;
   height: 300px;
}
#bg-pic .pic {
   width: 25%;
   float:left;
   display: flex;
   justify-content: center;
   align-items: center;
   /* 上３行でボックスをど真ん中に指定 */
   height: 100%;
   background-size: cover;
}
#bg-pic .pic_1 {
   background-image: url("https://images.unsplash.com/photo-1473181488821-2d23949a045a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80");
}
#bg-pic .pic_2 {
   background-image: url("https://images.unsplash.com/photo-1442323794357-25b2ec110967?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80");
}
#bg-pic .pic_3 {
   background-image: url("https://images.unsplash.com/photo-1498550744921-75f79806b8a7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80");
}
#bg-pic .pic_4 {
   background-image: url("https://images.unsplash.com/photo-1476820865390-c52aeebb9891?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80");
}
/* スライダーの送りボタンを指定 */
#slide-buttons {
   margin: 60px 0 0;
   text-align: center;
}
#slide-buttons label {
   display: inline-block;
   width: 10px;
   height: 10px;
   border-radius:0%;
   background: gainsboro;
   margin: 0 10px;
   transform: scale(1,1);
   /* XY軸(横縦)の伸縮率を指定 */
   transition-duration:.5s;
   /* アニメーションの開始から終了までの時間を指定 */
}
#slide-buttons label:hover {
  transform: scale(1.5,1.5);
  /* XY軸(横縦)の伸縮率を指定 */
}
#pic1:checked ~ #slide-buttons label:nth-child(1),
#pic2:checked ~ #slide-buttons label:nth-child(2),
#pic3:checked ~ #slide-buttons label:nth-child(3),
#pic4:checked ~ #slide-buttons label:nth-child(4) {
   background: #444;
}

ここがポイント！