CSS3實現的滑鼠懸浮廣告牌翻轉切換效果

admin發表於2017-02-17
CSSS3
本章節分享一段程式碼例項，它實現了滑鼠懸浮實現廣告牌翻轉切換效果。

這種廣告在實際應用中非常人性化，能夠在有限的空間內儘可能的放置更多的廣告。

為站長或者客戶都帶來了便利，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
*{ 
  margin:0; 
  padding:0;
}
ul,li{ 
  list-style:none; 
  margin:0; padding:0;
 }
.brandsShow{ 
  width:1200px; 
  height:620px; 
  margin:0 auto; 
 }
.brandsShow ul{ 
  margin-left:-20px; 
  width:1225px; 
  height:auto; 
 }
.brandsShow ul li{ 
  float:left; 
  display:inline; 
  width:283px; 
  height:283px; 
}
.flip-container {
  perspective:1000;
  /*父類容器中 perspective 子類允許透視*/
  -webkit-perspective:1000px; 
  -moz-perspective:1000px;
  -ms-perspective:1000px;
  -o-perspective:1000px;
  perspective:1000px;
  margin:0px auto; 
  float:left; 
  margin-left:20px; 
  margin-bottom:20px; 
  border:1px solid #fff;
}
.flip-container:hover .back {
  transform: rotateY(0deg); 
  -webkit-transform:rotateY(0deg);
  -moz-transform:rotateY(0deg);
  -ms-transform:rotateY(0deg);
  -o-transform:rotateY(0deg); 
  z-index:2;
 }
.flip-container:hover .front { 
  transform: 
  rotateY(180deg);
  -webkit-transform:rotateY(180deg);
  -moz-transform:rotateY(180deg);
  -ms-transform:rotateY(180deg);
  -o-transform:rotateY(180deg); 
  z-index:1
}
.flip-container, .front, .back {
  width:283px;
  height:283px;
}
.flipper {
  transition:transform 0.6s ease-out;
  transition: transform .5s ease-in-out;
  -webkit-transition: transform .5s ease-in-out;
  -moz-transition: transform .5s ease-in-out;
  -ms-transition: transform .5s ease-in-out;
  -o-transition: transform .5s ease-in-out;
  -webkit-transform-style: preserve-3d; /*使其子類變換後得以保留 3d轉換後的位置*/
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  display:block;position: relative;}
.front, .back {
  backface-visibility: hidden;
  transition: 0.6s ease-out;
  -webkit-transition: .6s ease-out; 
  -webkit-transform-style: preserve-3d; 
  -moz-transform-style: preserve-3d; 
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position: absolute;
  top: 0;
  left: 0;
 }
.front img, .back img{ 
  width:283px; 
  height:283px; 
  overflow:hidden;
 }
.front {
  z-index:2;
  transform:rotateY(0deg);
  transform: rotateY(0deg); 
  -webkit-transform:rotateY(0deg);
  -moz-transform:rotateY(0deg);
  -ms-transform:rotateY(0deg);
  -o-transform: rotateY(0deg);
}
.back { 
  z-index:1;
  transform: rotateY(-180deg);
  transform: rotateY(-180deg);
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  -o-transform: rotateY(-180deg);
}
</style>
</head>
<body>
<ul>
  <li class="flip-container"> 
    <a href="brandLi.html" class="flipper">
      <div class="front "><img src="one.jpg">前面</div>
      <div class="back " ><img src="two.jpg">後面</div>
    </a> 
  </li>
</ul>
</body>
</html>

相關文章