CSS：實現(xiàn)頁面翻轉(zhuǎn) 正反兩面展示不同的內(nèi)容
要點：
1 頁面旋轉(zhuǎn)使用css3的rorateY(180deg) 實現(xiàn)頁面的翻轉(zhuǎn)
2 使用backface-visibility 實現(xiàn)正面元素翻轉(zhuǎn)之后背面不可見，顯示出反面的元素
demo：
html
<div>
<div>反面的內(nèi)容</div>
<div>正面的內(nèi)容</div>
</div>
css
div{
width:200px;
height:200px;
margin:20px auto;
position:relative;
}
div .front,div .oppsite{
position:absolute;
left:0;
top:0;
right:0,
bottom:0;
background-color:blue;
transition:all 2s ease-in -out;
}
div .front{
background-color:red;
}
div:hover .front,div:hover .oppsite{
transform:rorateY(180deg)
}
web前端開發(fā)學習Q-q-u-n： 767273102 ，分享學習的方法和需要注意的小細節(jié)，不停更新最新的教程和學習方法
深圳網(wǎng)站建設www.sz886.com
