要点:
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 的项目实战的学习资料都有整理, 送给每一位前端小伙伴, 每天分享技术
点击: 加入
来源: http://www.jianshu.com/p/205011cd792b