OLD | NEW |
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" | 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" |
2 "http://www.w3.org/TR/html4/strict.dtd"> | 2 "http://www.w3.org/TR/html4/strict.dtd"> |
3 <html> | 3 <html> |
4 <head> | 4 <head> |
5 <title>Test for Bugs 39295 and 39297</title> | 5 <title>Test for Bugs 39295 and 39297</title> |
6 <meta http-equiv="refresh" content="5"> | 6 <meta http-equiv="refresh" content="5"> |
7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
8 <meta name="viewport" content="initial-scale=0.60, minimum-scale=0.60, maxim
um-scale=0.60"> | 8 <meta name="viewport" content="initial-scale=0.60, minimum-scale=0.60, maxim
um-scale=0.60"> |
9 <style type="text/css"> | 9 <style type="text/css"> |
10 | 10 |
(...skipping 93 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
104 use that on the whole set of objects. The second and third | 104 use that on the whole set of objects. The second and third |
105 animations will perform a full rotation on the y-axis in | 105 animations will perform a full rotation on the y-axis in |
106 opposite directions, alternating directions between rows. | 106 opposite directions, alternating directions between rows. |
107 | 107 |
108 Note that you currently have to specify an intermediate step | 108 Note that you currently have to specify an intermediate step |
109 for rotations even when you are using individual transformation | 109 for rotations even when you are using individual transformation |
110 constructs. | 110 constructs. |
111 | 111 |
112 */ | 112 */ |
113 @-webkit-keyframes x-spin { | 113 @-webkit-keyframes x-spin { |
114 0% { -webkit-transform: rotateX(0deg); } | 114 0% { transform: rotateX(0deg); } |
115 50% { -webkit-transform: rotateX(180deg); } | 115 50% { transform: rotateX(180deg); } |
116 100% { -webkit-transform: rotateX(360deg); } | 116 100% { transform: rotateX(360deg); } |
117 } | 117 } |
118 | 118 |
119 @-webkit-keyframes y-spin { | 119 @-webkit-keyframes y-spin { |
120 0% { -webkit-transform: rotateY(0deg); } | 120 0% { transform: rotateY(0deg); } |
121 50% { -webkit-transform: rotateY(180deg); } | 121 50% { transform: rotateY(180deg); } |
122 100% { -webkit-transform: rotateY(360deg); } | 122 100% { transform: rotateY(360deg); } |
123 } | 123 } |
124 | 124 |
125 @-webkit-keyframes back-y-spin { | 125 @-webkit-keyframes back-y-spin { |
126 0% { -webkit-transform: rotateY(360deg); } | 126 0% { transform: rotateY(360deg); } |
127 50% { -webkit-transform: rotateY(180deg); } | 127 50% { transform: rotateY(180deg); } |
128 100% { -webkit-transform: rotateY(0deg); } | 128 100% { transform: rotateY(0deg); } |
129 } | 129 } |
130 </style> | 130 </style> |
131 | 131 |
132 <script type="text/javascript"> | 132 <script type="text/javascript"> |
133 | 133 |
134 const POSTERS_PER_ROW = 12; | 134 const POSTERS_PER_ROW = 12; |
135 const RING_RADIUS = 200; | 135 const RING_RADIUS = 200; |
136 | 136 |
137 function setup_posters (row) | 137 function setup_posters (row) |
138 { | 138 { |
(...skipping 38 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
177 <div id="rotate"> | 177 <div id="rotate"> |
178 <div id="ring-1" class="ring"></div> | 178 <div id="ring-1" class="ring"></div> |
179 <div id="ring-2" class="ring"></div> | 179 <div id="ring-2" class="ring"></div> |
180 <div id="ring-3" class="ring"></div> | 180 <div id="ring-3" class="ring"></div> |
181 </div> | 181 </div> |
182 </div> | 182 </div> |
183 | 183 |
184 </body> | 184 </body> |
185 | 185 |
186 </html> | 186 </html> |
OLD | NEW |