老校友 - Powered by Discuz! Board

Sclub交友聊天~加入聊天室當版主

(檢舉)

標題: css倒影字 [打印本頁]

作者: rainbow 時間: 2018-8-27 23:43 標題: css倒影字

本帖最後由 rainbow 於 2018-8-31 09:48 編輯

倒影字

此代码只在chrome浏览器上才能显示倒影效果

<style type="text/css">
.倒影字{
color: #31859B;
-webkit-box-reflect:below 0px;
}
</style>
<div class="倒影字" style="FONT: normal 60px/110% Microsoft YaHei; letter-spacing:20px" align=center>倒影字</div><br><br><br><br>

複製代碼

垂直翻转字

此代码只在Chrome浏览器上适用

<div style="transform:scaleY(-1); FONT: normal 60px/110% Microsoft YaHei; color: #337FE5; letter-spacing:20px" align=center>垂直翻转字</div><br><br><br><br>

複製代碼

作者: rainbow 時間: 2018-8-27 23:53

本帖最後由 rainbow 於 2018-8-27 23:54 編輯

css图片垂直镜像

此代码只在chrome浏览器上才能显示倒影效果

<style type="text/css">
.img{
color: #31859B;
-webkit-box-reflect:below 0px;
}
</style>
<div class="img" align=center><img src="http://www.wosowoso.com/jpg/fgx/fgx366.gif"></div><br><br><br><br>

複製代碼

作者: rainbow 時間: 2018-8-28 00:40

本帖最後由 rainbow 於 2018-8-31 09:50 編輯

css图片水平镜像

（此代码只在Chrome浏览器上才能显示镜像效果）

<style type="text/css">
.flipx {
-moz-transform:scaleX(-1);
-webkit-transform:scaleX(-1);
-o-transform:scaleX(-1);
transform:scaleX(-1);
/*IE*/
filter:FlipH;
}
</style>
<div align=center><img src="http://img1.oldkids.cn/upload/2017/07/30/blog_20170730105812374.png" width=200>&emsp;<img class="flipx" src="http://img1.oldkids.cn/upload/2017/07/30/blog_20170730105812374.png" width=200></div><br><br>

複製代碼

作者: rainbow 時間: 2018-8-28 00:54

本帖最後由 rainbow 於 2018-8-31 09:51 編輯

css图片垂直镜像

（此代码只在Chrome浏览器上才能显示镜像效果）

<style type="text/css">
.flipv {
-moz-transform:scaleY(-1);
-webkit-transform:scaleY(-1);
-o-transform:scaleY(-1);
transform:scaleY(-1);
/*IE*/
filter:FlipV;
}
</style>
<div align=center><img src="http://newimg88.b0.upaiyun.com/newimg88/2017/10/photo1.jpg" width=400><br><br><img class="flipv" src="http://newimg88.b0.upaiyun.com/newimg88/2017/10/photo1.jpg" width=400></div><br><br>

複製代碼

歡迎光臨老校友 (http://boanson.orzweb.net/)