HTML+CSS 图片翻转
本文的主要内容是当hover时实现一张卡片的翻转（卡片两边内容不同）。实现起来比较简单，动动手指吧！本文的主要内容是当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>
