AI（ChatGPT）を使って半自動で月5万稼ぐ？
実際にやってみて結果・・ >>

【rotate×scale】画像が回転・拡大するCSSアニメーション３選(解説あり)

今回は【rotate×scale】画像が回転・拡大するCSSアニメーション３選(解説あり)をご紹介。シンプルかつ洗練されたデザイン。filterで美しいエフェクト。transformプロパティ(rotate×scale)で画像が回転・拡大する。Web制作で使える。コピペOK。HTML, CSSだけ

まずは動きを確認してみてください（これがコピペOKなのかと驚くはず）

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

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

Webデザインやフロントエンド初心者の方はWebデザイナー３ヶ月独学ロードマップを読んでから学習してもらえれば失敗しないと思います。

ふたご

この記事の目次
【rotate×scale】画像が回転・拡大するCSSアニメーション３選(解説あり)

  1. rotate×box-shadowでリアルすぎる画像回転アニメーション
  2. rotate×scale(拡大)で失敗しない画像回転アニメーション
  3. rotate×scale(拡大)×filterで想像を上回る画像回転アニメーション
  4. 【初心者向け】失敗しないプログラミングTIPS

 

１. rotate×box-shadowでリアルすぎる画像回転アニメーション

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

 

実際の動きはこちら

 

コードはこちら
コードを見る
  <div class="container">
    <div class="image1">
      <img src="https://images.unsplash.com/photo-1535916707207-35f97e715e1c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1567&q=80" style="background-size:cover;" class="img" alt="">
    </div>
    <div class="image2">
      <img src="https://images.unsplash.com/photo-1495562569060-2eec283d3391?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80" style="background-size:cover;" class="img" alt="">
    </div>
    <div class="image3">
      <img src="https://images.unsplash.com/photo-1513568720563-6a5b8c6caab3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1627&q=80" style="background-size:cover;" class="img" alt="">
    </div>
    <div class="image4">
      <img src="https://images.unsplash.com/photo-1445277547562-477f4b504b7b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1653&q=80" style="background-size:cover;" class="img" alt="">
    </div>
  </div>

.container {
  width: 100%;
  min-height: 650px;
}
/* image1のスタイル調整 */
.image1 {
  /* 3D変形の奥行きの指定 */
  perspective: 3000px;
  width: 20%;
  position: absolute;
  /* 画像の位置調整 */
  left: 25%;
  top:30%;
}
.image1 img {
  /* 画像の回転角度調整 */
  transform: rotateX(50deg) rotateZ(-30deg);
  /* ３D感を出すためにbox-shadowを指定 */
  box-shadow: -20px 20px 15px 5px rgba(0,0,0,0.4);
  /* アニメーションの速度調整 */
  transition: all 1.0s;
  width: 100%;
}
.image1:hover img {
  /* hover後の画像の回転角度調整 */
  transform: rotateX(0) rotateZ(360deg);
  /* hover後の影の打ち消し */
  box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
}
/* image2のスタイル調整 */
.image2 {
  /* 3D変形の奥行きの指定 */
  perspective: 3000px;
  width: 20%;
  position: absolute;
  /* 画像の位置調整 */
  left: 55%;
  top:30%;
  /* 要素の3D指定 */
  transform-style: preserve-3d;
}
.image2 img {
  /* 画像の回転角度調整 */
  transform: rotateX(50deg) rotateZ(-30deg);
  /* ３D感を出すためにbox-shadowを指定 */
  box-shadow: -20px 20px 15px 5px rgba(0,0,0,0.4);
  /* アニメーションの速度調整 */
  transition: all 1.0s;
  width: 100%;
}
.image2:hover img {
  /* hover後の画像の回転角度調整 */
  transform: rotateX(0) rotateZ(360deg);
  /* hover後の影の打ち消し */
  box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
}
/* image3のスタイル調整 */
.image3 {
    /* 3D変形の奥行きの指定 */
  perspective: 3000px;
  width: 20%;
  position: absolute;
  /* 画像の位置調整 */
  left: 25%;
  top:70%;
  /* 要素の3D指定 */
  transform-style: preserve-3d;
}
.image3 img {
    /* 画像の回転角度調整 */
  transform: rotateX(50deg) rotateZ(-30deg);
  /* ３D感を出すためにbox-shadowを指定 */
  box-shadow: -20px 20px 15px 5px rgba(0,0,0,0.4);
  /* アニメーションの速度調整 */
  transition: all 1.0s;
  width: 100%;
}
.image3:hover img {
    /* hover後の画像の回転角度調整 */
  transform: rotateX(0) rotateZ(360deg);
  /* hover後の影の打ち消し */
  box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
}
/* image4のスタイル調整 */
.image4 {
    /* 3D変形の奥行きの指定 */
  perspective: 3000px;
  width: 20%;
  position: absolute;
  /* 画像の位置調整 */
  left: 55%;
  top: 70%;
  /* 要素の3D指定 */
  transform-style: preserve-3d;
}
.image4 img {
  /* 画像の回転角度調整 */
  transform: rotateX(50deg) rotateZ(-30deg);
  /* ３D感を出すためにbox-shadowを指定 */
  box-shadow: -20px 20px 15px 5px rgba(0,0,0,0.4);
  /* アニメーションの速度調整 */
  transition: all 1.0s;
  width: 100%;
}
.image4:hover img {
    /* hover後の画像の回転角度調整 */
  transform: rotateX(0) rotateZ(360deg);
  /* hover後の影の打ち消し */
  box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
}
POINT
  1. 画像４つ各々にスタイルを指定していく
  2. image(1-4)クラスのtop, leftをそれぞれ指定することで複数画像を均等に配置
  3. box-shadowを使って画像を3Dに変形
  4. hover時にそれらを打ち消すことで2D画像に変化
  5. hover前後でtransform : rotateX() rotateZ()の値を変化させ画像に回転アニメーションをつける
  6. transitionプロパティを指定することで滑らかなアニメーションを実現

２. rotate×scale(拡大)で失敗しない画像回転アニメーション

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

 

実際の動きはこちら

 

コードはこちら
コードを見る
   <div class="container">
    <div class="image1">
      <img src="https://images.unsplash.com/photo-1535916707207-35f97e715e1c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1567&q=80" style="background-size:cover;" class="img" alt="">
    </div>
    <div class="image2">
      <img src="https://images.unsplash.com/photo-1495562569060-2eec283d3391?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80" style="background-size:cover;" class="img" alt="">
    </div>
    <div class="image3">
      <img src="https://images.unsplash.com/photo-1513568720563-6a5b8c6caab3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1627&q=80" style="background-size:cover;" class="img" alt="">
    </div>
    <div class="image4">
      <img src="https://images.unsplash.com/photo-1445277547562-477f4b504b7b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1653&q=80" style="background-size:cover;" class="img" alt="">
    </div>
  </div>

.container {
  width: 100%;
  min-height: 650px;
}
/* image1のスタイル調整 */
.image1 {
  /* 3D変形の奥行きの指定 */
  perspective: 3000px;
  width: 20%;
  position: absolute;
  /* 画像の位置調整 */
  left: 25%;
  top:30%;
}
.image1 img {
  /* 画像の回転角度/拡大縮小サイズを調整 */
  transform: scale(.9) rotateX(50deg) rotateZ(-30deg);
  /* ３D感を出すためにbox-shadowを指定 */
  box-shadow: -20px 20px 15px 5px rgba(0,0,0,0.4);
  /* アニメーションの速度調整 */
  transition: all 1.0s;
  width: 100%;
}
.image1:hover img {
  /* hover後の画像の回転角度/拡大縮小サイズを調整 */
  transform: scale(1.2) rotateX(0) rotateZ(360deg);
  /* hover後の影の打ち消し */
  box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
}
/* image2のスタイル調整 */
.image2 {
  /* 3D変形の奥行きの指定 */
  perspective: 3000px;
  width: 20%;
  position: absolute;
  /* 画像の位置調整 */
  left: 55%;
  top:30%;
  /* 要素の3D指定 */
  transform-style: preserve-3d;
}
.image2 img {
  /* 画像の回転角度/拡大縮小サイズを調整 */
  transform: scale(.9) rotateX(50deg) rotateZ(-30deg);
  /* ３D感を出すためにbox-shadowを指定 */
  box-shadow: -20px 20px 15px 5px rgba(0,0,0,0.4);
  /* アニメーションの速度調整 */
  transition: all 1.0s;
  width: 100%;
}
.image2:hover img {
  /* hover後の画像の回転角度/拡大縮小サイズを調整 */
  transform: scale(1.2) rotateX(0) rotateZ(360deg);
  /* hover後の影の打ち消し */
  box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
}
/* image3のスタイル調整 */
.image3 {
    /* 3D変形の奥行きの指定 */
  perspective: 3000px;
  width: 20%;
  position: absolute;
  /* 画像の位置調整 */
  left: 25%;
  top:70%;
  /* 要素の3D指定 */
  transform-style: preserve-3d;
}
.image3 img {
    /* 画像の回転角度/拡大縮小サイズを調整 */
  transform: scale(.9) rotateX(50deg) rotateZ(-30deg);
  /* ３D感を出すためにbox-shadowを指定 */
  box-shadow: -20px 20px 15px 5px rgba(0,0,0,0.4);
  /* アニメーションの速度調整 */
  transition: all 1.0s;
  width: 100%;
}
.image3:hover img {
    /* hover後の画像の回転角度/拡大縮小サイズを調整 */
  transform: scale(1.2) rotateX(0) rotateZ(360deg);
  /* hover後の影の打ち消し */
  box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
}
/* image4のスタイル調整 */
.image4 {
    /* 3D変形の奥行きの指定 */
  perspective: 3000px;
  width: 20%;
  position: absolute;
  /* 画像の位置調整 */
  left: 55%;
  top: 70%;
  /* 要素の3D指定 */
  transform-style: preserve-3d;
}
.image4 img {
  /* 画像の回転角度/拡大縮小サイズを調整 */
  transform: scale(.9) rotateX(50deg) rotateZ(-30deg);
  /* ３D感を出すためにbox-shadowを指定 */
  box-shadow: -20px 20px 15px 5px rgba(0,0,0,0.4);
  /* アニメーションの速度調整 */
  transition: all 1.0s;
  width: 100%;
}
.image4:hover img {
    /* hover後の画像の回転角度/拡大縮小サイズを調整 */
  transform: scale(1.2) rotateX(0) rotateZ(360deg);
  /* hover後の影の打ち消し */
  box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
}
POINT
  1. 画像４つ各々にスタイルを指定していく
  2. image(1-4)クラスのtop, leftをそれぞれ指定することで複数画像を均等に配置
  3. box-shadowを使って画像を3Dに変形
  4. hover時にそれらを打ち消すことで2D画像に変化
  5. hover前後でtransform : scale() rotateX() rotateZ()の値を変化させ画像に回転/拡大アニメーションをつける
  6. transitionプロパティを指定することで滑らかなアニメーションを実現

 

３. rotate×scale(拡大)×filterで想像を上回る画像回転アニメーション

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

 

実際の動きはこちら

 

コードはこちら
コードを見る
  <div class="container">
    <div class="image1">
      <img src="https://images.unsplash.com/photo-1535916707207-35f97e715e1c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1567&q=80" style="background-size:cover;" class="img" alt="">
    </div>
    <div class="image2">
      <img src="https://images.unsplash.com/photo-1495562569060-2eec283d3391?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80" style="background-size:cover;" class="img" alt="">
    </div>
    <div class="image3">
      <img src="https://images.unsplash.com/photo-1513568720563-6a5b8c6caab3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1627&q=80" style="background-size:cover;" class="img" alt="">
    </div>
    <div class="image4">
      <img src="https://images.unsplash.com/photo-1445277547562-477f4b504b7b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1653&q=80" style="background-size:cover;" class="img" alt="">
    </div>
  </div>

.container {
  width: 100%;
  min-height: 650px;
}
/* image1のスタイル調整 */
.image1 {
  /* 3D変形の奥行きの指定 */
  perspective: 3000px;
  width: 20%;
  position: absolute;
  /* 画像の位置調整 */
  left: 25%;
  top:30%;
}
.image1 img {
  /* 画像の回転角度/拡大縮小サイズを調整 */
  transform: scale(.9) rotateX(50deg) rotateZ(-30deg);
  /* ３D感を出すためにbox-shadowを指定 */
  box-shadow: -20px 20px 15px 5px rgba(0,0,0,0.4);
  /* アニメーションの速度調整 */
  transition: all 1.0s;
  width: 100%;
  /* filterプロパティで白黒度合い・明るさ・彩度・コントラストを調整 */
  filter: grayscale(1) brightness(100%) saturate(100%) contrast(100%);
}
.image1:hover img {
  /* hover後の画像の回転角度/拡大縮小サイズを調整 */
  transform: scale(1.2) rotateX(0) rotateZ(360deg);
  /* hover後の影の打ち消し */
  box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
  /* filterプロパティで白黒度合い・明るさ・彩度・コントラストを調整 */
  filter: grayscale(0) brightness(110%) saturate(180%) contrast(110%);
}
/* image2のスタイル調整 */
.image2 {
  /* 3D変形の奥行きの指定 */
  perspective: 3000px;
  width: 20%;
  position: absolute;
  /* 画像の位置調整 */
  left: 55%;
  top:30%;
  /* 要素の3D指定 */
  transform-style: preserve-3d;
}
.image2 img {
  /* 画像の回転角度/拡大縮小サイズを調整 */
  transform: scale(.9) rotateX(50deg) rotateZ(-30deg);
  /* ３D感を出すためにbox-shadowを指定 */
  box-shadow: -20px 20px 15px 5px rgba(0,0,0,0.4);
  /* アニメーションの速度調整 */
  transition: all 1.0s;
  width: 100%;
  filter: grayscale(1) brightness(100%) saturate(100%) contrast(100%);
}
.image2:hover img {
  /* hover後の画像の回転角度/拡大縮小サイズを調整 */
  transform: scale(1.2) rotateX(0) rotateZ(360deg);
  /* hover後の影の打ち消し */
  box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
  filter: grayscale(0) brightness(110%) saturate(180%) contrast(110%);
}
/* image3のスタイル調整 */
.image3 {
    /* 3D変形の奥行きの指定 */
  perspective: 3000px;
  width: 20%;
  position: absolute;
  /* 画像の位置調整 */
  left: 25%;
  top:70%;
  /* 要素の3D指定 */
  transform-style: preserve-3d;
}
.image3 img {
    /* 画像の回転角度/拡大縮小サイズを調整 */
  transform: scale(.9) rotateX(50deg) rotateZ(-30deg);
  /* ３D感を出すためにbox-shadowを指定 */
  box-shadow: -20px 20px 15px 5px rgba(0,0,0,0.4);
  /* アニメーションの速度調整 */
  transition: all 1.0s;
  width: 100%;
  filter: grayscale(1) brightness(100%) saturate(100%) contrast(100%);
}
.image3:hover img {
    /* hover後の画像の回転角度/拡大縮小サイズを調整 */
  transform: scale(1.2) rotateX(0) rotateZ(360deg);
  /* hover後の影の打ち消し */
  box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
  filter: grayscale(0) brightness(110%) saturate(180%) contrast(110%);
}
/* image4のスタイル調整 */
.image4 {
    /* 3D変形の奥行きの指定 */
  perspective: 3000px;
  width: 20%;
  position: absolute;
  /* 画像の位置調整 */
  left: 55%;
  top: 70%;
  /* 要素の3D指定 */
  transform-style: preserve-3d;
}
.image4 img {
  /* 画像の回転角度/拡大縮小サイズを調整 */
  transform: scale(.9) rotateX(50deg) rotateZ(-30deg);
  /* ３D感を出すためにbox-shadowを指定 */
  box-shadow: -20px 20px 15px 5px rgba(0,0,0,0.4);
  /* アニメーションの速度調整 */
  transition: all 1.0s;
  width: 100%;
  filter: grayscale(1) brightness(100%) saturate(100%) contrast(100%);
}
.image4:hover img {
    /* hover後の画像の回転角度/拡大縮小サイズを調整 */
  transform: scale(1.2) rotateX(0) rotateZ(360deg);
  /* hover後の影の打ち消し */
  box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
  filter: grayscale(0) brightness(110%) saturate(180%) contrast(110%);
}
POINT
  1. 画像４つ各々にスタイルを指定していく
  2. image(1-4)クラスのtop, leftをそれぞれ指定することで複数画像を均等に配置
  3. box-shadowを使って画像を3Dに変形
  4. hover時にそれらを打ち消すことで2D画像に変化
  5. hover前後にfilter：grayscale(白黒度合い) brightness(明るさ) saturate(彩度) contrast(コントラスト)
  6. hover前後でtransform : scale() rotateX() rotateZ()の値を変化させ画像に回転/拡大アニメーションをつける
  7. transitionプロパティを指定することで滑らかなアニメーションを実現

【初心者向け】失敗しないプログラミングTIPS

そもそもWebデザインの基礎がわからない。。
そんなあなたには『Udemy』

ふたご

未経験からWeb制作で月５０万稼げるようになったUdemy教材３選
  1. 『未経験からプロのWebデザイナーになる！ 400レッスン以上の完全マスターコース』
  2. 『HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門』
  3. 『超Vue.js 2 完全パック – もう他の教材は買わなくてOK！ (Vue Router, Vuex含む)』
でもなあ、独学だと心配だしプログラミングスクールで学びたい！。かといってお金はかけたくないし。。
そんなあなたには『ProEngineer』

ふたご

完全無料で一人前のエンジニアになれるプログラミングスクール【ProEngineer】
  1. プログラミング学習＆サポートが無料！
  2. 誰もが知っている超優良企業への就職サポート付き！
  3. 学習言語：Java、PHP、HTML、CSSなど

 

 　　話だけ聞いてみる 　  

前の記事

【コピペOK】横並びのCSSナビゲーションバー３選｜trans…

次の記事

【初心者】@keyframesを使ったシンプルなCSSアニメー…