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