vh-support-transform-translate-iframe.html (1035B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title> 6 CSS Values and Units Test: 7 Viewports units are supported in transform properties (iframe) 8 </title> 9 <meta name="assert" content=" 10 Viewports units are supported in transform properties (translate) 11 " /> 12 13 <link 14 rel="author" 15 title="François REMY" 16 href="mailto:fremycompany.developer@yahoo.fr" 17 / > 18 19 <link rel="help" href="http://www.w3.org/TR/css3-values/#viewport-relative-lengths"> 20 <link rel="help" href="http://www.w3.org/TR/css3-2d-transforms/#css-values"> 21 22 <style type="text/css"> 23 24 html, body { margin: 0px; padding: 0px; overflow: hidden; } 25 26 html { background: green; } 27 #target, #over-target { 28 position: absolute; top: 0px; left: 0px; 29 width: 100px; height: 100px; 30 } 31 32 #target { 33 background: red; 34 transform: translate(200px, 200px); 35 } 36 37 #over-target { 38 background: green; 39 transform: translate(50vw, 50vh); 40 } 41 42 </style> 43 44 </head> 45 <body> 46 47 <div id="target"></div> 48 <div id="over-target"></div> 49 50 </body> 51 </html>