transform-006-ref.html (1187B)
1 <!DOCTYPE html> 2 <link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> 3 <style> 4 .transformed { 5 transform: rotate(25deg); 6 transform-origin: bottom right; 7 background: hotpink; 8 } 9 .child { 10 margin-left: auto; 11 width: 50px; 12 background: lime; 13 } 14 .fake-column { 15 float: left; 16 width: 100px; 17 height: 100px; 18 } 19 .fake-column:not(:last-child) { 20 margin-right: 20px; 21 } 22 </style> 23 <div style="width:460px; column-gap:20px; margin-top:50px; height:100px; background:yellow;"> 24 <div class="fake-column"> 25 <div class="transformed" style="margin-top:50px; height:50px;"> 26 <div class="child" style="height:50px;"></div> 27 </div> 28 </div> 29 <div class="fake-column"> 30 <div class="transformed" style="height:100px;"> 31 <div class="child" style="height:100px;"></div> 32 </div> 33 </div> 34 <div class="fake-column"> 35 <div class="transformed" style="height:25px;"> 36 <div class="child" style="height:100px;"></div> 37 </div> 38 </div> 39 <div class="fake-column"> 40 <div class="transformed" style="height:0;"> 41 <div class="child" style="height:50px;"></div> 42 </div> 43 </div> 44 </div>