<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<style>
html,
body {
width: 100%;
height: 100%;
}
.contant {
position: relative;
width: 100px;
height: 200px;
margin: 0 auto;
margin-top: 200px;
perspective: 800px;
/* 这个是css3的翻转功能,但是要想实现3d效果还要加上景深perspective: 800px; */
}
.zheng {
width: 100px;
height: 200px;
position: absolute;
/* background: blue; */
left: 0;
top: 0;
transition: 1s all;
/* 过渡动画 */
background-image: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537963190298&di=99157f801585efa899730e94f40fd062&imgtype=0&src=http%3A%2F%2Fpic28.photophoto.cn%2F20130924%2F0005018337538847_b.jpg');
background-size: 100% 100%;
background-repeat: no-repeat;
}
.fan {
width: 100px;
height: 200px;
position: absolute;
background: greenyellow;
left: 0;
top: 0;
/* text-indent: 2em; */
transform: rotateY(180deg);
backface-visibility: hidden;
/* 这个属性的作用就是翻转过去的内容被隐藏了,所以我们只能看到一个面的内容。就达到了一个卡片2个面切换显示。 */
transition: 1s all;
font-size: 14px;
color: red;
/* padding:20px 10px; */
box-sizing: border-box;
}
.contant:hover .zheng {
transform: rotateY(-180deg);
/* Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转,缩放,移动,倾斜等。 */
}
.contant:hover .fan {
transform: rotateY(0deg);
}
</style>
<body>
<div class="contant">
<div class="zheng">
</div>
<div class="fan">
<p>姓名:娜美</p>
<p>来自:海贼王</p>
<p>年龄:22</p>
<p>相关亲人:暂无</p>
<p>简介:暂无</p>
</div>
</div>
</body>
</html>
解释都在代码里面,主要用的css3中的tramsfrom与tansition,
还有3D效果化的属性:perspective:800px;
backface-visibility:这个属性的作用就是翻转过去的内容被隐藏了,所以我们只能看到一个面的内容