Rumah >hujung hadapan web >html tutorial >CSS3实现的页面反转效果_html/css_WEB-ITnose
CSS3实现的页面反转效果_html/css_WEB-ITnose
- WBOYasal
- 2016-06-24 11:30:351051semak imbas
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/
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：关于【bootstrap】中，【tooltip】的不算bug的bug的个人看法_html/css_WEB-ITnoseArtikel seterusnya：实现table细线表格效果代码_html/css_WEB-ITnose