<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .box{ /*-webkit-perspective:100;*/ display: flex; } li{ position: relative; width: 100px; height: 100px; -webkit-transform-style: preserve-3d; /* */ -webkit-transition: 2s; list-style: none; margin-right: 10px; } li:hover{ -webkit-transform: rotateX(180deg);/***旋转***/ } li .face{ position: absolute; left: 0px; top: 0px; -webkit-backface-visibility: hidden;/***隐藏被旋转的div的背面*/ } li .face img{ width: 100%; } .back{ width: 100px; height: 100px; -webkit-transform: rotateX(180deg); /* background: -webkit-linear-gradient(top,rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); */ } </style> </head> <body> <ul class="box"> <li class="film"> <div class="face front"> <img src="images/Penguins.jpg"> </div> <div class="face back"> <img src="images/Koala.jpg" alt="so suess"> </div> </li> <li class="film"> <div class="face front"> <img src="images/Koala.jpg" alt="so suess"> </div> <div class="face back"> <img src="images/Penguins.jpg"> </div> </li> <li class="film"> <div class="face front"> <img src="images/Penguins.jpg"> </div> <div class="face back"> <img src="images/Koala.jpg" alt="so suess"> </div> </li> </ul> </body> </html>