© Style-5.net
 

CSS3だけでリンク付き画像を3Dロールオーバーエフェクト回転

CSS3だけでリンク付き画像を3Dなロールオーバーエフェクト回転

DEMOページ


CSS
#logos {
   position:absolute;  top: 0px;  left: 150px;  -moz-perspective: 800px;   /* 全体の位置調整 */
   -ms-perspective: 800px;
   -webkit-perspective: 800px;
   -o-perspective: 800px;
   perspective: 800px; 
}
#cube {
  display: block;  position: relative;  margin: 30px auto;
  height: 200px;  width: 200px;   /* 画像サイズ */
  -moz-transform-style: preserve-3d;
  -moz-transform:rotateX(0) rotateY(0) rotateZ(0);
  -webkit-transform-style: preserve-3d;
  -webkit-transform: rotateX(0) rotateY(0) rotateZ(0);
  -ms-transform-style: preserve-3d;
  -ms-transform: rotateX(0) rotateY(0) rotateZ(0);
  -o-transform-style: preserve-3d;
  -o-transform: rotateX(0) rotateY(0) rotateZ(0);
  transform-style: preserve-3d;
  transform: rotateX(0) rotateY(0) rotateZ(0);

}
#front {
  position: absolute;  height: 200px;  width: 200px;   /* 画像サイズ */
  -moz-backface-visibility: visible;
  -moz-transform:  translateZ(100px);
  -webkit-backface-visibility: visible;
  -webkit-transform:  translateZ(100px);
  -ms-backface-visibility: visible;
  -ms-transform:  translateZ(100px);
  -o-backface-visibility: visible;
  -o-transform:  translateZ(100px);
  backface-visibility: visible;
  transform:  translateZ(100px);
}
#back {
  position: absolute;  height: 200px;  width: 200px;   /* 画像サイズ */
  -moz-backface-visibility: visible;
  -moz-transform:  rotateY(180deg) translateZ(100px);
  -ms-backface-visibility: visible;
  -ms-transform:  rotateY(180deg) translateZ(100px);
  -webkit-backface-visibility: visible;
  -webkit-transform:  rotateY(180deg) translateZ(100px);
  -o-backface-visibility: visible;
  -o-transform: rotateY(180deg) translateZ(100px);
  backface-visibility: visible;
  transform: rotateY(180deg) translateZ(100px);
}
#cube {
-moz-animation: upyourscache1360419949016 5s infinite linear;
-ms-animation: upyourscache1360419949016 5s infinite linear;
-webkit-animation: upyourscache1360419949016 5s infinite linear;
-o-animation: upyourscache1360419949016 5s infinite linear;
animation: upyourscache1360419949016 5s infinite linear;

}
@-moz-keyframes upyourscache1360419949016 {
0% { -moz-transform: rotateY(0) ;}
100% { -moz-transform: rotateY(360deg) ;}
}
@-webkit-keyframes upyourscache1360419949016 {
0% { -webkit-transform: rotateY(0) ;}
100% { -webkit-transform: rotateY(360deg) ;}
}
@-ms-keyframes upyourscache1360419949016 {
0% { -ms-transform: rotateY(0) ;}
100% { -ms-transform: rotateY(360deg) ;}
}
@-o-keyframes upyourscache1360419949016 {
0% { -o-transform: rotateY(0) ;}
100% { -o-transform: rotateY(360deg) ;}
}
@keyframes upyourscache1360419949016 {
0% { transform: rotateY(0) ;}
100% { transform: rotateY(360deg) ;}
}

HTMLマークアップ
<div id="logos">
  <a id="cube" href="http://style-5.net/">   /* リンク先url */
    <img src="image.png"  id="front" alt="mae">   /* 前になる画像 */
    <img src="image.png" id="back" alt="ushiro">   /* 後ろになる画像 */
  </a>
</div>

※全体的な位置関係は position で調整
※IE(Internet Explorer)の場合バージョン10以上でないと表示されません