<!DOCTYPE html>
Document
<br> * {<br> margin: 0;<br> padding: 0;<br> box-sizing: border-box;<br> }<br> .piclist {<br> width: 600px;<br> height: 800px;<br> margin: 0 auto;<br> position: relative;<br> background-color: rgb(27, 39, 201);<br> }<br> .picbox {<br> width: 510px;<br> height: 1600px;<br> margin: 0 auto;<br> background-color: rgb(36, 224, 136);<br> transform-style: preserve-3d;<br> }<br> .picbox:hover {<br> transform: rotateY(180deg);<br> transition: all 3s linear;<br> }<br> .face {<br> border: 2px solid black;<br> width: 510px;<br> height: 800px;<br> /* position: absolute; */<br> backface-visibility: hidden;<br> }<br> .front {<br> z-index: 1;<br> }<br> .back {<br> transform: rotateY(180deg);<br> }<br>
class="face front"
src="../image/哆啦A梦510 768.jpg"
alt="图片无法加载"
/>
class="face back"
src="../image/海贼王510 768.jpg"
alt="图片无法加载"
/>