web前端入门到实战：CSS实现页面翻转正反两面展示不同的内容

最新推荐文章于 2023-08-31 16:23:57 发布

魔方编程

最新推荐文章于 2023-08-31 16:23:57 发布

阅读量1.4k

点赞数

文章标签： css 前端 web前端前端开发网页制作

本文链接：https://blog.csdn.net/wewfdf/article/details/100522541

版权

要点：

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

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

demo：

html

<div>
　　<div>反面的内容</div>
　　<div>正面的内容</div>
</div>

css

web前端开发学习Q-q-u-n： 767273102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）
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)
}