準(zhǔn)備兩張圖片，尺寸一樣大，本代碼中是繞 Y 軸進(jìn)行旋轉(zhuǎn)（也可以改為 X 軸）。
先看看效果：
?文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-530267.html
代碼如下：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-530267.html
<!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>Document</title>
<style>
/* 最外層盒子設(shè)置 */
.box {
position: relative;
width: 500px;
height: 278px;
margin: 100px auto;
perspective: 1500px;
}
/* 盒子內(nèi)的所有圖片進(jìn)行定位，背面不可見(jiàn)，背面隱藏起來(lái) */
.box img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
/* 第二張圖片反過(guò)來(lái)是正的，要提前把后面的的圖片翻轉(zhuǎn)180度 */
.box img:nth-of-type(2) {
transform: rotateX(-180deg);
}
/* 設(shè)置過(guò)渡效果 */
.box img {
transition: all 1s;
}
/* 鼠標(biāo)移動(dòng)到圖片時(shí)，前面的圖片翻轉(zhuǎn)180度，后面的圖片翻轉(zhuǎn)回0度 */
.box:hover img:nth-of-type(1) {
transform: rotateX(180deg);
}
.box:hover img:nth-of-type(2) {
transform: rotateX(0deg);
}
</style>
</head>
<body>
<div class="box">
<img src="./img/bg1.jpg" />
<img src="./img/bg2.jpg" />
</div>
</body>
</html>
到了這里，關(guān)于CSS3實(shí)現(xiàn)圖片的3D旋轉(zhuǎn)效果的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
