滑鼠懸浮圖片3D翻轉出現文字說明

螞蟻小編發表於2018-07-15
3D

分享一段程式碼例項，它實現了滑鼠懸浮圖片3D翻轉出現文字說明的效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
html, body, div, h2, p {
  margin: 0;
  padding: 0;
}
.wrap {
  width: 200px;
  height: 200px;
  border-radius: 200px;
  overflow: hidden;
  margin: 200px auto;
}
.img {
  background: url("demo/CSS/img/shishi.jpg") center;
  background-size: 200px;
}
.shadow {
  width: 160px;
  height: 160px;
  border-radius: 160px;
  background: #fff;
  margin: 20px;
  box-shadow: 0 0 0 20px rgba(255,255,255,.4);
  transition: box-shadow 0.5s ease-in-out;
}
.photo {
  width: 160px;
  height: 160px;
  position: relative;
}
.front, .back {
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 160px;
  overflow: hidden;
  transform-style: preverve-3d;
  backface-visibility: hidden;
  transition: transform 0.5s ease-in-out;
}
.back {
  background: #ff0b40;
  text-align: center;
  color: #fff;
}
.back h2 {
  font-size: 22px;
  padding: 25px 0 35px 0;
  margin: 0 15px;
  border-bottom: 1px solid #fff;
}
.back p {
  font-size: 15px;
  margin-top: 10px;
}
.wrap .front {
  transform: rotateY(0deg);
}
.wrap .back {
  transform: rotateY(180deg);
}
.wrap:hover .front {
  transform: rotateY(180deg);
}
.wrap:hover .back {
  transform: rotateY(0deg);
}
.wrap:hover .shadow {
  box-shadow: 0 0 0 0 rgba(255,255,255,.4);
}
</style>
</head>
<body>
  <div class="wrap img">
    <div class="shadow">
      <div class="photo">
        <div class="front img"></div>
        <div class="back">
          <h2>劉詩詩</h2>
          <p>
            1978-03-10<br />
            雙魚座
          </p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

上面的程式碼實現了我們的要求，更多內容參閱相關閱讀。

相關閱讀:

（1）.border-radius參閱CSS3 border-radius一章節。

（2）.box-shadow參閱CSS3 box-shadow一章節。

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

（4）.backface-visibility參閱CSS3 backface-visibility一章節。

相關文章