强大的CSS：实现页面翻转 正反两面展示不同的内容

要点：

1 页面旋转使用css3的rorateY(180deg) 实现页面的翻转

2 使用backface-visibility 实现正面元素翻转之后背面不可见，显示出反面的元素

demo：

html

<div>
　　<div>反面的内容</div>
　　<div>正面的内容</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)
}

自己是一个五年的前端工程师,希望本文对你有帮助！

这里推荐一下我的前端学习交流扣qun：731771211 ，里面都是学习前端的，如果你想制作酷炫的网页，想学习编程。自己整理了一份2019最全面前端学习资料，从最基础的HTML+CSS+JS【炫酷特效，游戏，插件封装，设计模式】到移动端HTML5的项目实战的学习资料都有整理，送给每一位前端小伙伴，每天分享技术

点击：加入