为什么我的这个图片背面隐藏必须加上border才能生效啊 有人可以帮忙看一下吗

<!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="图片无法加载"
/>



https://developers.weixin.qq.com/community/develop/doc/0000406eb08450d56d5941e9356400