transform-009-ref.html (1829B)
1 <!DOCTYPE html> 2 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 3 <link rel="help" href="https://www.w3.org/TR/css-break-3/#transforms"> 4 <style> 5 .fakecolumn { 6 width: 100px; 7 height: 100px; 8 } 9 .relpos { 10 position: relative; 11 width: 30px; 12 top: 50px; 13 left: 50px; 14 } 15 .transform { 16 transform: rotate(45deg); 17 height: 100%; 18 } 19 .abspos { 20 position: absolute; 21 width: 100%; 22 height: 100%; 23 background: green; 24 } 25 </style> 26 <p>Below there should be six rotated green rectangles (not all with the same 27 size).</p> 28 <div style="display:flex;"> 29 <div class="fakecolumn"> 30 <div class="relpos" style="margin-top:50px;"> 31 <div class="transform" style="height:0;"> 32 <div class="abspos" style="height:50px;"></div> 33 </div> 34 </div> 35 </div> 36 <div class="fakecolumn"> 37 <div class="relpos"> 38 <div class="transform" style="height:0;"> 39 <div class="abspos" style="height:100px;"></div> 40 </div> 41 </div> 42 </div> 43 <div class="fakecolumn"> 44 <div class="relpos" style="margin-top:50px;"> 45 <div class="transform" style="height:50px;"> 46 <div class="abspos" style="top:-50px; height:100px;"></div> 47 </div> 48 </div> 49 </div> 50 <div class="fakecolumn"> 51 <div class="relpos"> 52 <div class="transform" style="height:100px;"> 53 <div class="abspos"></div> 54 </div> 55 </div> 56 </div> 57 <div class="fakecolumn"> 58 <div class="relpos"> 59 <div class="transform" style="height:0;"> 60 <div class="abspos" style="height:100px;"></div> 61 </div> 62 </div> 63 </div> 64 <div class="fakecolumn"> 65 <div class="relpos"> 66 <div class="transform" style="height:0;"> 67 <div class="abspos" style="height:50px;"></div> 68 </div> 69 </div> 70 </div> 71 </div>