本文的主要内容是当hover时实现一张卡片的翻转(卡片两边内容不同)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片翻转</title>
<style>
.pictures-flipping {
background-color: rgb(50, 50, 85);
height: 500px;
}
.pictures-flipping>div {
width: 250px;
height: 350px;
position: absolute;
}
.box:hover .imgf {
transform: rotateY(180deg);
}
.box:hover .imgb {
transform: rotateY(360deg);
}
div img {
position: absolute;
transition: all 2s;
}
div img:first-child {
z-index: 1;
backface-visibility: hidden;
}
div img:nth-child(2) {
transform: rotatey(.5turn);
}
.box1 {
left: 100px;
top: 100px;
}
.box2 {
left: 400px;
top: 100px;
}
.box3 {
left: 700px;
top: 100px;
}
.box4 {
left: 1000px;
top: 100px;
}
</style>
</head>
<body>
<div class="pictures-flipping">
<div class="box1 box">
<img class="imgf" src="img/1.jpg" width="100%">
<img class="imgb" src="img/1.1.jpg" width="100%">
</div>
<div class="box2 box">
<img class="imgf" src="img/2.jpg" width="100%">
<img class="imgb" src="img/2.2.jpg" width="100%">
</div>
<div class="box3 box">
<img class="imgf" src="img/3.jpg" width="100%">
<img class="imgb" src="img/3.3.jpg" width="100%">
</div>
<div class="box4 box">
<img class="imgf" src="img/4.jpg" width="100%">
<img class="imgb" src="img/4.4.jpg" width="100%">
</div>
</div>
</body>
</html>
实现起来比较简单,动动手指吧!