html
<div>
<p class="img1">456456</p>
<p class="img2">123123</p>
</div>
css
* {
margin: 0;
padding: 0;
}
div:hover {
transform: rotateY(180deg);
}
div {
position: relative;
width: 300px;
height: 200px;
transition: 2s;
transform-style: preserve-3d; /* 3d才能實(shí)現(xiàn)效果喲 */
}
div p {
line-height: 200px;
text-align: center;
font-size: 70px;
backface-visibility: hidden; /*背面隱藏*/
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
}
.img2 {
transform: rotateY(180deg);
}
END，感謝閱讀瞬内！歡迎評論區(qū)留言討論~
