相关文章
王通blog:如何通过网络赚钱
北京网站设计如何正确使用标题元素、段落和强制换行
北京网站设计首页用户登陆模板
企通互联模版管理
网站制作精通 CSS 滤镜（二）
网站设计用CSS样式固定表格宽度
北京网页设计META标签的奥妙
网页设计Flash MX 2004 功能介绍（4）
网站制作Dreamweaver基础视频教程23 制作可自动关闭的广告层
网站设计Dreamweaver基础视频教程14 Flash图片查看器
品牌理念
北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!
友好连接
文章搜索
你的位置：首页 >> 网站制作 >> 网站制作北京网页设计CSS滤镜之FlipH、FlipV属性
网站制作北京网页设计CSS滤镜之FlipH、FlipV属性
 |
Filter：FlipH
Filter：FlipV
我们先来看一幅图：点击可放大
下面我们分别对它实现水平翻转和垂直翻转，并且在图片上方的一段文字，也发生翻转。代码如下：
北京网页设计<html> 企通互联
<head> 网站设计
<title>flip css</title> 北京网页设计
<style>//*设置CSS样式开始*// 北京网站设计
<!-- 网站设计网站建设
div{position：absolute；top：20；width：300；网站设计
www.qitongnet.comfilter：fliph（flipv）；} 北京网站制作
//*定义DIV范围内的样式，绝对定位，翻转为水平翻转或垂直翻转。 北京网站设计 网页设计
网站制作 注意：在这里fliph和flipv只取其中的一个*// www.qitongnet.com
img{position：absolute；top：70；left：40；网站建设
filter：fliph（flipv）；} 北京网站制作
//*定义图片的样式，绝对定位，翻转属性和DIV一样。*// 北京网站建设
--> 北京网站建设北京网站建设
</style> 北京网站建设
</head> 北京网站制作
<body> 网站建设
<div> www.qitongnet.com
<p style=“font-family： 北京网站制作bailey；font-size：36pt；北京网站设计
font-weight：bold； color：rgb(10,128,156)；”> 北京网站制作
Leaf Village </p>www.qitongnet.com
//*定义字体名称、大小、粗细、颜色*// 北京网站制作
</div> 网站制作
<p><img src=“ss05058.jpg”></p> 企通互联企通互联
//*导入一张图片*// 网站设计
</body> 北京网站设计
</html>
代码产生的两个效果分别如下图：（点击可以放大）
水平翻转 垂直翻转
北京网站制作北京网站制作
上一篇：网站建设CSS滤镜之blur属性
下一篇：企通互联CSS滤镜之Wave属性