OLD | NEW |
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" | 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" |
2 "http://www.w3.org/TR/html4/loose.dtd"> | 2 "http://www.w3.org/TR/html4/loose.dtd"> |
3 | 3 |
4 <html lang="en"> | 4 <html lang="en"> |
5 <head> | 5 <head> |
6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
7 <title>Compare Compound Transforms (translate scale rotate)</title> | 7 <title>Compare Compound Transforms (translate scale rotate)</title> |
8 | 8 |
9 <style type="text/css" media="screen"> | 9 <style type="text/css" media="screen"> |
10 div { | 10 div { |
(...skipping 12 matching lines...) Expand all Loading... |
23 .box { | 23 .box { |
24 background-color: green; | 24 background-color: green; |
25 } | 25 } |
26 </style> | 26 </style> |
27 </head> | 27 </head> |
28 <body> | 28 <body> |
29 | 29 |
30 <p>Test ensures that nested transformed elements produce the same result as a si
ngle compound transform.You should not see any red in the two tests below</p> | 30 <p>Test ensures that nested transformed elements produce the same result as a si
ngle compound transform.You should not see any red in the two tests below</p> |
31 <div class="container"> | 31 <div class="container"> |
32 <p>Translate first</p> | 32 <p>Translate first</p> |
33 <div style="-webkit-transform: translate(75px, 20px)"> | 33 <div style="transform: translate(75px, 20px)"> |
34 <div style="-webkit-transform: scale(1.6, 1.6)"> | 34 <div style="transform: scale(1.6, 1.6)"> |
35 <div style="-webkit-transform: rotate(45deg)"> | 35 <div style="transform: rotate(45deg)"> |
36 <div class="box" style="background-color: red">Individual</div> | 36 <div class="box" style="background-color: red">Individual</div> |
37 </div> | 37 </div> |
38 </div> | 38 </div> |
39 </div> | 39 </div> |
40 <div class="box" style="-webkit-transform: translate(75px, 20px) scale(1.6, 1.
6) rotate(45deg);"></div> | 40 <div class="box" style="transform: translate(75px, 20px) scale(1.6, 1.6) rotat
e(45deg);"></div> |
41 </div> | 41 </div> |
42 | 42 |
43 <div class="container"> | 43 <div class="container"> |
44 <p>Translate second</p> | 44 <p>Translate second</p> |
45 <div style="-webkit-transform: scale(1.6, 1.6)"> | 45 <div style="transform: scale(1.6, 1.6)"> |
46 <div style="-webkit-transform: translate(75px, 20px)"> | 46 <div style="transform: translate(75px, 20px)"> |
47 <div style="-webkit-transform: rotate(45deg)"> | 47 <div style="transform: rotate(45deg)"> |
48 <div class="box" style="background-color: red">Individual</div> | 48 <div class="box" style="background-color: red">Individual</div> |
49 </div> | 49 </div> |
50 </div> | 50 </div> |
51 </div> | 51 </div> |
52 <div class="box" style="-webkit-transform: scale(1.6, 1.6) translate(75px, 20p
x) rotate(45deg);"></div> | 52 <div class="box" style="transform: scale(1.6, 1.6) translate(75px, 20px) rotat
e(45deg);"></div> |
53 </div> | 53 </div> |
54 | 54 |
55 </body> | 55 </body> |
56 </html> | 56 </html> |
OLD | NEW |