[CSS]パネル切替時の普通のエフェクトに飽きた人用、立体的にくるっと回転させるスタイルシート

ホバー時にインフォメーションを表示する際、立方体がくるっと回転するようなアニメーションのエフェクトを実装するチュートリアルを紹介します。

Showing Product Information With CSS3 3D Transform

[ad#ad-2]

• デモ
• 実装

デモ

デモはFirefoxでご覧ください。

デモページ

切替時のエフェクトは下記のようになっています。
まずは、通常時。

通常時

[ad#ad-2]

ホバーすると、アニメーションでくるっと回転します。

ホバー時：回転中

アニメーションが完了すると、インフォメーションが表示されます。

ホバー時：回転完了

実装

HTML

パネルは、通常時の一枚画像、ホバー時のインフォメーションをdiv要素で内包します。

<div class="wrapper">
<div class="item">
    <img src="images/contact.png">
    <span class="information">
      <strong>Contact Form</strong> The easiest way to add a contact form to your shop.
    </span>
  </div>
</div>

実装のイメージは下記のようになります。

通常時は「front side」の画像が表示され、ホバー時に「bottom side」のインフォメーションが表示されます。

CSS

まずは、ラッパーのスタイルです。
perspectiveを使用して3Dの奥行きを与え、transform-styleで子要素が3Dを保つように設定します。

.wrapper {
  display: inline-block;
  width: 310px;
  height: 100px;
  vertical-align: top;
  margin: 1em 1.5em 2em 0;
  cursor: pointer;
  position: relative;
  font-family: Tahoma, Arial;
  perspective: 4000px;
}

.item {
  height: 100px;
  transform-style: preserve-3d;
  transition: transform .6s;
}

画像とインフォメーションはそれぞれブロックにし、CSS3アニメーションを設定します。

.item img {  
  display: block;  
  position: absolute;  
  top: 0;  
  border-radius: 3px;  
  box-shadow: 0px 3px 8px rgba(0,0,0,0.3);  
  transform: translateZ(50px);  
  transition: all .6s;  
  
}  
  
.item .information {  
  display: block;  
  position: absolute;  
  top: 0;  
  height: 80px;  
  width: 290px;  
  text-align: left;  
  border-radius: 15px;  
  padding: 10px;  
  font-size: 12px;  
  text-shadow: 1px 1px 1px rgba(255,255,255,0.5);  
  box-shadow: none;  
  background: linear-gradient(top,rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);  
  transform: rotateX(-90deg) translateZ(50px);  
  transition: all .6s;  
  
}

最後にホバー時の回転のアニメーションを設定し、より美しくするため角丸とシャドウを加えます。

    .item:hover {  
      transform: translateZ(-50px) rotateX(95deg);  
    }  
      
      .item:hover img {  
        box-shadow: none;  
        border-radius: 15px;  
      }  
      
      .item:hover .information {  
        box-shadow: 0px 3px 8px rgba(0,0,0,0.3);  
        border-radius: 3px;  
      }