鼠标悬浮图片3D翻转出现文本说明

快乐打工仔 分类:实例代码

鼠标悬浮图片3D翻转出现文本说明属于前端实例代码,有关更多实例代码大家可以查看

分享一段代码实例,它实现了鼠标悬浮图片3D翻转出现文本说明的效果。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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一章节。

鼠标悬浮图片3D翻转出现文本说明,这样的场景在实际项目中还是用的比较多的,关于鼠标悬浮图片3D翻转出现文本说明就介绍到这了。

回复

我来回复
  • 暂无回复内容