transform-008.html (845B)
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 <link rel="match" href="transform-008-ref.html"> 5 <style> 6 .relpos { 7 position: relative; 8 top: 50px; 9 left: 50px; 10 width: 50px; 11 } 12 .transform { 13 transform: rotate(45deg); 14 height: 200px; 15 } 16 .abspos { 17 position: absolute; 18 width: 100%; 19 height: 100%; 20 background: green; 21 } 22 </style> 23 <p>Below there should be two green squares, and one green rectangle between 24 them. They should all be rotated.</p> 25 <div style="columns:3; column-gap:0; column-fill:auto; width:300px; height:100px;"> 26 <div class="relpos" style="margin-top:50px;"> 27 <div class="transform"> 28 <div class="abspos"></div> 29 </div> 30 </div> 31 </div>