css倒影字

rainbow

倒影字

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

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

複製代碼

垂直翻转字

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

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

複製代碼

rainbow

css图片垂直镜像

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

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

複製代碼

rainbow

css图片水平镜像

 

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

1. <style type="text/css">
2. .flipx {
3. -moz-transform:scaleX(-1);
4. -webkit-transform:scaleX(-1);
5. -o-transform:scaleX(-1);
6. transform:scaleX(-1);
7. /*IE*/
8. filter:FlipH;
9. }
10. </style>
11. <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

css图片垂直镜像

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

1. <style type="text/css">
2. .flipv {
3. -moz-transform:scaleY(-1);
4. -webkit-transform:scaleY(-1);
5. -o-transform:scaleY(-1);
6. transform:scaleY(-1);
7. /*IE*/
8. filter:FlipV;
9. }
10. </style>
11. <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>

複製代碼