CSS3滑鼠懸浮圖片前後翻轉

admin發表於2018-07-11
CSSS3

本章節分享一段程式碼例項，實現了滑鼠懸浮圖片出現前後翻轉效果。

比較常見於網站廣告，下面就是一段這樣類似的功能。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
body {
  background: #eeeeee;
}
h3 {
  color: red;
  text-align: center;
  font: bold 18px/1.5 "microsoft yahei";
}
.card-container {
  position: relative;
  width: 1100px;
  margin: 0 auto;
}
.card {
  margin-right: 15px;
  width: 200px;
  height: 380px;
  float: left;
}
.card .font,.card .back {
  position: absolute;
  transition: transform 0.4s;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
.card .font {
  transform: rotateY( 0deg);
}
.card .back {
  transform: rotateY( -180deg);
}
.card:hover .font {
  transform: rotateY( 180deg);
}
.card:hover .back {
  transform: rotateY( 0deg);
}
.card2,.card4 {
  margin-top: 20px;
}
</style>
</head>
<body>
  <h3>滑鼠移動到卡片上試試</h3>
  <div class="card-container">
    <div class="card card1">
      <a href="#" class="back"><img src="demo/CSS/img/card6-back.png" /></a>
      <a href="#" class="font"><img src="demo/CSS/img/card6.png" /></a>
    </div>
    <div class="card card2">
      <a href="#" class="back"><img src="demo/CSS/img/card7-back.png" /></a>
      <a href="#" class="font"><img src="demo/CSS/img/card7.png" /></a>
    </div>
    <div class="card card3">
      <a href="#" class="back"><img src="demo/CSS/img/card8-back.png" /></a>
      <a href="#" class="font"><img src="demo/CSS/img/card8.png" /></a>
    </div>
    <div class="card card4">
      <a href="#" class="back"><img src="demo/CSS/img/card9-back.png" /></a>
      <a href="#" class="font"><img src="demo/CSS/img/card9.png" /></a>
    </div>
    <div class="card card5">
      <a href="#" class="back"><img src="demo/CSS/img/card10-back.png" /></a>
      <a href="#" class="font"><img src="demo/CSS/img/card10.png" /></a>
    </div>
  </div>
</body>
</html>

滑鼠懸浮，實現圖片翻轉效果。

相關閱讀：

（1）.相對定位參閱CSS position:relative 相對定位一章節。

（2）.絕對定位參閱CSS position:absolute 絕對定位一章節。

（3）.transition參閱CSS3 transition一章節。

（4）.transform-style參閱CSS3 transform-style一章節。

相關文章