CSS3实现的页面反转效果_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 11:30:35
原創
1038 人瀏覽過

CSS3实现的页面反转效果:
页面反转效果在实际应用中不太常见,不过也并非没有,下面分享一段利用CSS3实现的此效果,寄希望能够给需要的朋友带来一定的帮助,代码如下:

 

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">html{filter:fliph}body {  -webkit-transform:rotateY(180deg);  -moz-transform:skew(0deg, 180deg) scale(-1, 1);  -o-transform:skew(0deg, 180deg) scale(-1, 1);  transform:rotateY(180deg);}</style></head><body>蚂蚁部落欢迎您。</body></html>
登入後複製

 

以上代码实现了我们的要求,主要是使用了transform属性,具体可以参阅CSS的transform属性一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=11856

更多内容可以参阅:http://www.softwhy.com/divcss/

 

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板