愚人节页面翻转效果的实现

最新推荐文章于 2024-06-11 11:42:02 发布

失眠万岁

最新推荐文章于 2024-06-11 11:42:02 发布

阅读量507

点赞数

分类专栏： web前端文章标签： filter ie html css

本文链接：https://blog.csdn.net/d19891006/article/details/6774995

版权

web前端专栏收录该内容

42 篇文章 0 订阅

订阅专栏

昨天愚人节，逛pinterest.com的时候，发现页面上的有些地方翻转了，着实被愚了一把。

所以在自己的博客上也加了一下效果，具体的实现通过ie滤镜和css3旋转，具体代码：

 
html{filter:fliph}/*ie fliph(水平翻转滤镜)，还有flipv垂直翻转滤镜*/
 
body{-webkit-transform: rotateY(180deg);
 
transform: rotateY(180deg);
 
-moz-transform: skew(0deg, 180deg) scale(-1, 1);
 
-o-transform: skew(0deg, 180deg) scale(-1, 1);}