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

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

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

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

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

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

ふたご

 

1. 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);
  /* 3D感を出すために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);
  /* 3D感を出すために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);
  /* 3D感を出すために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);
  /* 3D感を出すために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. 画像4つ各々にスタイルを指定していく
  2. image(1-4)クラスのtop, leftをそれぞれ指定することで複数画像を均等に配置
  3. box-shadowを使って画像を3Dに変形
  4. hover時にそれらを打ち消すことで2D画像に変化
  5. hover前後でtransform : rotateX() rotateZ()の値を変化させ画像に回転アニメーションをつける
  6. transitionプロパティを指定することで滑らかなアニメーションを実現

2. 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);
  /* 3D感を出すために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);
  /* 3D感を出すために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);
  /* 3D感を出すために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);
  /* 3D感を出すために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. 画像4つ各々にスタイルを指定していく
  2. image(1-4)クラスのtop, leftをそれぞれ指定することで複数画像を均等に配置
  3. box-shadowを使って画像を3Dに変形
  4. hover時にそれらを打ち消すことで2D画像に変化
  5. hover前後でtransform : scale() rotateX() rotateZ()の値を変化させ画像に回転/拡大アニメーションをつける
  6. transitionプロパティを指定することで滑らかなアニメーションを実現

 

3. 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);
  /* 3D感を出すために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);
  /* 3D感を出すために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);
  /* 3D感を出すために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);
  /* 3D感を出すために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. 画像4つ各々にスタイルを指定していく
  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』

ふたご


でもなあ、独学だと心配だしプログラミングスクールで学びたい!。かといってお金はかけたくないし。。
そんなあなたにはProEngineer

ふたご

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

 

   話だけ聞いてみる