* {
margin: 0;
padding: 0;
}
.parent {
height: 400px;
margin:50px auto;
background-color: #ccc;
}
.son {
width: 300px;
height: 300px;
position: relative;
transform-style: preserve-3d;
transition: all 1s;
margin: 0 auto;
}
.son::after,.son::before {
content: "";
position: absolute;
left: 0;
top: 0;
display: block;
width: 100%;
height: 100%;
background: url(./images/bg.png);
}
.son::before {/*這里將before放在背面*/
background-position: right top;
/*提前將前面的圖片旋轉(zhuǎn)到背面*/
transform: rotateY(180deg);
}
.son::after {
background-position: left top;
/*將背面的圖片不能看到背面和看到是一樣的*/
backface-visibility: visible;
}
.son:hover {
/*此時整個容器旋轉(zhuǎn)180，剛好將之前旋轉(zhuǎn)的180抵消烛占，所以看到的是正面而不是鏡像*/
transform: rotateY(180deg);
}
<div class="parent">
<div class="son"></div>
</div>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
