反转文字（滤镜filter:Flip）

吉祥如意988 2014-12-09

展开全文

反转文字（滤镜filter:Flip）
吉祥如意988/编辑

一、简介

反转特效文字效果其实就是运用了滤镜filter 属性之一滤镜filter:Flip（使元素反转）。

Flip是CSS滤镜的反转属性：

FlipH代表水平方向反转

FlipV代表垂直方向反转

它们的原理都是制作一个镜像，然后让指定元素在水平或垂直方向实现反转。它们的表达式很简单，分别是：

Filter:FlipH

Filter:FlipV

更多运用在图片的反转和Filter:FlipV制作倒影字特效。
相关更多滤镜属性点击参阅：滤镜filter 属性

二、HTML相关术语

TABLE 标签是一个容器标记:<table>...</table>
P 标签定义段落容器标记:<p>...</p>
DIV标签严格的组织容器标记:<div>...</div>

EM文本倾斜<em>...</em>或者运用I文本倾斜<i>...</i>
size 属性定义的是以像素为单位的输入字段宽度。
font 规定文本的字体、字体尺寸、字体颜色。<font>...</font>
font-size 属性可设置字体的尺寸。该属性设置元素的字体大小。注意，实际上它设置的是字体中字符框的高度；实际的字符字形可能比这些框高或矮（通常会矮）。
color颜色值。

三、基本代码

水平反转

TABLE 标签基本代码：
<TABLE style="Filter:FlipH"><TR><TD><FONT color=颜色值 size=字体大小值>水平反转文字效果</FONT></table>
P 标签基本代码：
<P style="FONT-SIZE: 字体大小值pt; Filter:FlipH; WIDTH:文本框宽度px; COLOR:颜色值; HEIGHT:文本框高度px" FONT>水平反转文字效果</FONT></P>
DIV 标签基本代码：
<DIV style="Filter:FlipH; WIDTH:文本框宽度px; COLOR:颜色值; HEIGHT:文本框高度px"><FONT size=字体大小值>水平反转文字效果</FONT></DIV>

垂直反转

TABLE 标签基本代码：
<TABLE style="Filter:Flipv"><TR><TD><FONT color=颜色值 size=字体大小值>垂直反转文字效果</FONT></table>
P 标签基本代码：
<P style="FONT-SIZE: 字体大小值pt; Filter:Flipv; WIDTH:文本框宽度px; COLOR:颜色值; HEIGHT:文本框高度px" FONT>垂直反转文字效果</FONT></P>
DIV 标签基本代码：
<DIV style="Filter:Flipv; WIDTH:文本框宽度px; COLOR:颜色值; HEIGHT:文本框高度px"><FONT size=字体大小值>垂直反转文字效果</FONT></DIV>

四、设置代码参数说明

字体颜色值：

color=#4a7ac9

字体文本框大小值：

在TABLE 标签、DIV标签内相同size=5（在DIV标签内HEIGHT: 35px设置了文本框的高度、设置了文本框宽度WIDTH: 216px）

在P 标签内font-size:18pt （实际设置了字体中字符框的高度）、设置文本框的高度HEIGHT:20pt、设置了文本框宽度WIDTH:216px

代码如下：

水平反转

TABLE 标签代码：

<TABLE style="Filter:FlipH"><TR><TD><FONT color=#4a7ac9 size=5>水平反转文字效果</FONT></TD></TR></table>

P 标签代码：

<P style="FONT-SIZE: 18pt; Filter:FlipH; WIDTH:216px; COLOR:#4a7ac9; HEIGHT:20px" FONT>水平反转文字效果</FONT></P>

DIV 标签代码：

<DIV style="Filter:FlipH; WIDTH:216px; COLOR:#4a7ac9; HEIGHT:35px"><FONT size=5>水平反转文字效果</FONT></DIV>

垂直反转

TABLE 标签代码：

<TABLE style="Filter:Flipv"><TR><TD><FONT color=#4a7ac9 size=5>垂直反转文字效果</FONT></TD></TR></table>

P 标签代码：

<P style="FONT-SIZE: 18pt; Filter:Flipv; WIDTH:216px; COLOR:#4a7ac9; HEIGHT:20px" FONT>垂直反转文字效果</FONT></P>

DIV 标签代码：

<DIV style="Filter:Flipv; WIDTH:216px; COLOR:#4a7ac9; HEIGHT:35px"><FONT size=5>垂直反转文字效果</FONT></DIV>

倒影字特效

TABLE 标签代码：

<TABLE><TR><TD><FONT color=#4a7ac9 size=5><em>倒影文字效果</em></FONT></TD></TR></table>
<TABLE style="Filter:Flipv"><TR><TD><FONT color=#4a7ac9 size=5><em>倒影文字效果</em></FONT></TD></TR></table>

P 标签代码：

<P style="FONT-SIZE: 18pt; WIDTH:216px; COLOR:#4a7ac9; HEIGHT:20px" FONT><em>倒影文字效果</em></FONT></P>
<P style="FONT-SIZE: 18pt; Filter:Flipv; WIDTH:216px; COLOR:#4a7ac9; HEIGHT:20px" FONT><em>倒影文字效果</em></FONT></P>

DIV 标签代码：

<DIV style="WIDTH:216px; COLOR:#4a7ac9; HEIGHT:35px"><FONT size=5><em>倒影文字效果</em></FONT></DIV>
<DIV style="Filter:Flipv; WIDTH:216px; COLOR:#4a7ac9; HEIGHT:35px"><FONT size=5><em>倒影文字效果</em></FONT></DIV>

五、代码演示示例

水平反转

TABLE 标签代码：
<TABLE style="Filter:FlipH"><TR><TD><FONT color=#4a7ac9 size=5>水平反转文字效果</FONT></TD></TR></table>

水平反转文字效果

P 标签代码：
<P style="FONT-SIZE: 18pt; Filter:FlipH; WIDTH:216px; COLOR:#4a7ac9; HEIGHT:20px" FONT>水平反转文字效果</FONT></P>

水平反转文字效果

DIV 标签代码：
<DIV style="Filter:FlipH; WIDTH:216px; COLOR:#4a7ac9; HEIGHT:35px"><FONT size=5>水平反转文字效果</FONT></DIV>

水平反转文字效果

垂直反转

TABLE 标签代码：
<TABLE style="Filter:Flipv"><TR><TD><FONT color=#4a7ac9 size=5>垂直反转文字效果</FONT></TD></TR></table>

垂直反转文字效果

P 标签代码：
<P style="FONT-SIZE: 18pt; Filter:Flipv; WIDTH:216px; COLOR:#4a7ac9; HEIGHT:20px" FONT>垂直反转文字效果</FONT></P>

垂直反转文字效果

DIV 标签代码：
<DIV style="Filter:Flipv; WIDTH:216px; COLOR:#4a7ac9; HEIGHT:35px"><FONT size=5>垂直反转文字效果</FONT></DIV>

垂直反转文字效果

倒影字特效

TABLE 标签代码：
<TABLE><TR><TD><FONT color=#4a7ac9 size=5><em>倒影文字效果</em></FONT></TD></TR></table>
<TABLE style="Filter:Flipv"><TR><TD><FONT color=#4a7ac9 size=5><em>倒影文字效果</em></FONT></TD></TR></table>

倒影文字效果

倒影文字效果

P 标签代码：
<P style="FONT-SIZE: 18pt; WIDTH:216px; COLOR:#4a7ac9; HEIGHT:20px" FONT><em>倒影文字效果</em></FONT></P>
<P style="FONT-SIZE: 18pt; Filter:Flipv; WIDTH:216px; COLOR:#4a7ac9; HEIGHT:20px" FONT><em>倒影文字效果</em></FONT></P>

倒影文字效果

倒影文字效果

DIV 标签代码：
<DIV style="WIDTH:216px; COLOR:#4a7ac9; HEIGHT:35px"><FONT size=5><em>倒影文字效果</em></FONT></DIV>
<DIV style="Filter:Flipv; WIDTH:216px; COLOR:#4a7ac9; HEIGHT:35px"><FONT size=5><em>倒影文字效果</em></FONT></DIV>

倒影文字效果

倒影文字效果