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

最新推荐文章于 2023-04-17 14:12:56 发布

稻草人@163

最新推荐文章于 2023-04-17 14:12:56 发布

阅读量528

点赞数 1

分类专栏： html5 文章标签： css3 旋转

html5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

<!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>

稻草人@163

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
鼠标悬浮图片3D翻转出现文本说明

#鼠标悬浮图片3D翻转出现文本说明&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;meta name="author" content="http://www.softwhy.com/" /&gt;&lt;title&gt;蚂蚁部落&am
复制链接

扫一扫

专栏目录