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 Bug 39139</title> | 5 <title>Test for Bug 39139</title> |
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 <meta name="viewport" content="initial-scale=0.60, minimum-scale=0.60, maxim
um-scale=0.60"> | 7 <meta name="viewport" content="initial-scale=0.60, minimum-scale=0.60, maxim
um-scale=0.60"> |
8 <style type="text/css"> | 8 <style type="text/css"> |
9 | 9 |
10 body { | 10 body { |
(...skipping 92 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
103 use that on the whole set of objects. The second and third | 103 use that on the whole set of objects. The second and third |
104 animations will perform a full rotation on the y-axis in | 104 animations will perform a full rotation on the y-axis in |
105 opposite directions, alternating directions between rows. | 105 opposite directions, alternating directions between rows. |
106 | 106 |
107 Note that you currently have to specify an intermediate step | 107 Note that you currently have to specify an intermediate step |
108 for rotations even when you are using individual transformation | 108 for rotations even when you are using individual transformation |
109 constructs. | 109 constructs. |
110 | 110 |
111 */ | 111 */ |
112 @-webkit-keyframes x-spin { | 112 @-webkit-keyframes x-spin { |
113 0% { -webkit-transform: rotateX(0deg); } | 113 0% { transform: rotateX(0deg); } |
114 50% { -webkit-transform: rotateX(180deg); } | 114 50% { transform: rotateX(180deg); } |
115 100% { -webkit-transform: rotateX(360deg); } | 115 100% { transform: rotateX(360deg); } |
116 } | 116 } |
117 | 117 |
118 @-webkit-keyframes y-spin { | 118 @-webkit-keyframes y-spin { |
119 0% { -webkit-transform: rotateY(0deg); } | 119 0% { transform: rotateY(0deg); } |
120 50% { -webkit-transform: rotateY(180deg); } | 120 50% { transform: rotateY(180deg); } |
121 100% { -webkit-transform: rotateY(360deg); } | 121 100% { transform: rotateY(360deg); } |
122 } | 122 } |
123 | 123 |
124 @-webkit-keyframes back-y-spin { | 124 @-webkit-keyframes back-y-spin { |
125 0% { -webkit-transform: rotateY(360deg); } | 125 0% { transform: rotateY(360deg); } |
126 50% { -webkit-transform: rotateY(180deg); } | 126 50% { transform: rotateY(180deg); } |
127 100% { -webkit-transform: rotateY(0deg); } | 127 100% { transform: rotateY(0deg); } |
128 } | 128 } |
129 </style> | 129 </style> |
130 | 130 |
131 <script type="text/javascript"> | 131 <script type="text/javascript"> |
132 | 132 |
133 const POSTERS_PER_ROW = 12; | 133 const POSTERS_PER_ROW = 12; |
134 const RING_RADIUS = 200; | 134 const RING_RADIUS = 200; |
135 | 135 |
136 function setup_posters (row) | 136 function setup_posters (row) |
137 { | 137 { |
(...skipping 36 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
174 <div id="rotate"> | 174 <div id="rotate"> |
175 <div id="ring-1" class="ring"></div> | 175 <div id="ring-1" class="ring"></div> |
176 <div id="ring-2" class="ring"></div> | 176 <div id="ring-2" class="ring"></div> |
177 <div id="ring-3" class="ring"></div> | 177 <div id="ring-3" class="ring"></div> |
178 </div> | 178 </div> |
179 </div> | 179 </div> |
180 | 180 |
181 </body> | 181 </body> |
182 | 182 |
183 </html> | 183 </html> |
OLD | NEW |