transform-008-ref.html (1131B)
1 <!DOCTYPE html> 2 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 3 <style> 4 .fakecolumn { 5 width: 100px; 6 height: 100px; 7 } 8 .relpos { 9 position: relative; 10 top: 50px; 11 left: 50px; 12 width: 50px; 13 } 14 .transform { 15 transform: rotate(45deg); 16 height: 100%; 17 } 18 .abspos { 19 position: absolute; 20 width: 100%; 21 height: 100%; 22 background: green; 23 } 24 </style> 25 <p>Below there should be two green squares, and one green rectangle between 26 them. They should all be rotated.</p> 27 <div style="display:flex;"> 28 <div class="fakecolumn"> 29 <div class="relpos" style="margin-top:50px; height:50px;"> 30 <div class="transform"> 31 <div class="abspos"></div> 32 </div> 33 </div> 34 </div> 35 <div class="fakecolumn"> 36 <div class="relpos" style="height:100px;"> 37 <div class="transform"> 38 <div class="abspos"></div> 39 </div> 40 </div> 41 </div> 42 <div class="fakecolumn"> 43 <div class="relpos" style="height:50px;"> 44 <div class="transform"> 45 <div class="abspos"></div> 46 </div> 47 </div> 48 </div> 49 </div>