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>Transform Center with Borders</title> | 7 <title>Transform Center with Borders</title> |
8 <style type="text/css" media="screen"> | 8 <style type="text/css" media="screen"> |
9 .container { | 9 .container { |
10 height: 200px; | 10 height: 200px; |
11 width: 200px; | 11 width: 200px; |
12 margin: 30px; | 12 margin: 30px; |
13 outline: 5px solid black; | 13 outline: 5px solid black; |
14 background-color: red; | 14 background-color: red; |
15 } | 15 } |
16 .box { | 16 .box { |
17 height: 200px; | 17 height: 200px; |
18 width: 100px; | 18 width: 100px; |
19 background-color: green; | 19 background-color: green; |
20 border-right: 100px solid gray; | 20 border-right: 100px solid gray; |
21 box-sizing: auto; | 21 box-sizing: auto; |
22 -webkit-transform: rotate(90deg); | 22 transform: rotate(90deg); |
23 } | 23 } |
24 .border-box { | 24 .border-box { |
25 width: 200px; | 25 width: 200px; |
26 box-sizing: border-box; | 26 box-sizing: border-box; |
27 } | 27 } |
28 </style> | 28 </style> |
29 </head> | 29 </head> |
30 <body> | 30 <body> |
31 | 31 |
32 <p>Tests that origin of rotation is the center of the border box, with and witho
ut box-sizing</p> | 32 <p>Tests that origin of rotation is the center of the border box, with and witho
ut box-sizing</p> |
33 <div class="container"> | 33 <div class="container"> |
34 <div class="box">box-sizing: auto</div> | 34 <div class="box">box-sizing: auto</div> |
35 </div> | 35 </div> |
36 | 36 |
37 <div class="container"> | 37 <div class="container"> |
38 <div class="box border-box">box-sizing: auto</div> | 38 <div class="box border-box">box-sizing: auto</div> |
39 </div> | 39 </div> |
40 </body> | 40 </body> |
41 </html> | 41 </html> |
OLD | NEW |