Flip是CSS滤镜的翻转属性，FlipH代表水平翻转，FlipV代表垂直翻转。它们的表达式很简单，分别是：
: {4 E; p# {" g9 `9 s; d* P9 {
8 w4 s S' G0 }1 _+ `. \1 F7 g Filter：FlipH
' N8 M7 j4 h i. z% F) E
" s" f) g1 W# `, z& b$ D
Filter：FlipV
4 M8 v) |( C0 N' ?3 a; [1 j
7 v& E3 b) d& |! j 我们先来看一幅图：点击可放大
5 U9 Y& O- {9 p4 a
) ]' o7 D4 i q7 P) G, G/ N' c8 I& Q" G# p
1 n# e* Z$ n; B* E& D8 v4 z9 D( H0 P
# D- C5 C; b& [: c$ V* K. U, z Y$ R7 e* T' ^% w& u3 |' p
下面我们分别对它实现水平翻转和垂直翻转，并且在图片上方的一段文字，也发生翻转。代码如下：
) m) P# {6 e/ J1 ^! h, Z7 p' \) v8 k
html
6 M$ X0 q0 q: Q0 U7 @* F$ E head
7 ~7 l1 R/ ?- i9 c0 Q9 [ titleflip css/title
0 F/ m/ f, Z2 P
style//*设置CSS样式开始*//
" \0 J ?6 U! y+ Z( A9 v, o
!--
4 S4 [. r+ j: r; ~" o- ^) {3 z1 [ div{position：absolute；top：20；width：300；
4 [# W! z/ O3 x- |3 @2 }9 Q filter：fliph（flipv）；}
% V2 _/ l6 C$ ^" X! p$ v
//*定义DIV范围内的样式，绝对定位，翻转为水平翻转或垂直翻转。
: `& A0 E5 f* A- J 注意：在这里fliph和flipv只取其中的一个*//
- U% p+ t" F; z
img{position：absolute；top：70；left：40；
: k' Q1 ^$ e- T% D c3 h- R filter：fliph（flipv）；}
H% O0 R, C& c. y6 J1 S5 w //*定义图片的样式，绝对定位，翻转属性和DIV一样。*//
8 P, ]6 B$ U% F* J. @5 A/ M, Y6 E, T
--
' D# E8 O# g. P+ @9 j2 X0 ?9 B- O8 a, x3 e
/style
, P" `7 L7 q! e
/head
" |; O% S/ J. e body
! U$ J/ v! J' Q3 ]( M, g
div
% j1 S+ a$ |. Q! G p+ {; ^
p style=“font-family：bailey；font-size：36pt；
/ ~/ i) N* E) Y* q1 P. W
font-weight：bold； color：rgb(10,128,156)；”
5 X) A2 C, V9 p& B
Leaf Village /p
1 U v5 r. T; c+ T& e6 C
//*定义字体名称、大小、粗细、颜色*//
U) W: S& }, z, h6 M6 M /div
" X. x( P$ V! j6 I1 T5 N( Z Y pimg src=“ss05058.jpg”/p
% |6 G. V# P# R2 K3 d //*导入一张图片*//
) }* u3 y, z' L4 r- X8 e /body
0 L& e' f$ M( ^( R2 @2 i
/html
( x& T( |* t! H1 I) i9 Z; e" _ n
4 U" B, b: |2 B* K! t9 d" k
代码产生的两个效果分别如下图：（点击可以放大）
3 p" W C% S5 S) F: S
2 o/ n$ g+ i: }$ t1 v% f/ }, R* p D' G8 S/ K
5 A; \3 P' Y, W8 ~
# r3 W. u% _' z& C! l
! E, m5 \7 E3 U7 a( A
! z* y4 c! v6 j6 G4 V
& L( t: g. K( c: I) X
水平翻转 垂直翻转
