| OLD | NEW | 
|---|
| (Empty) |  | 
|  | 1 <!DOCTYPE html> | 
|  | 2 <style> | 
|  | 3 div { | 
|  | 4     width: 100px; | 
|  | 5     height: 100px; | 
|  | 6     background-color: blue; | 
|  | 7 } | 
|  | 8 .container { | 
|  | 9     background-color: red; | 
|  | 10     perspective-origin: 150% 150%; | 
|  | 11     perspective: 500px; | 
|  | 12     transform: scale(0.5, 1); | 
|  | 13 } | 
|  | 14 #box1 { | 
|  | 15     transform: scale(0.5, 1); | 
|  | 16 } | 
|  | 17 #box2a { | 
|  | 18     transform: scale3d(-2, 3.5, 0.2) translate(400px); | 
|  | 19 } | 
|  | 20 #box2b { | 
|  | 21     backface-visibility: visible; | 
|  | 22     transform: scale3d(-2, 3.5, 0.2) translate(400px); | 
|  | 23 } | 
|  | 24 #box3 { | 
|  | 25     transform: scale3d(2, 3.5, 0.2) translate(200px, 100px); | 
|  | 26 } | 
|  | 27 #box4 { | 
|  | 28     transform: scale(2) translate(50px, 100px); | 
|  | 29 } | 
|  | 30 </style> | 
|  | 31 | 
|  | 32 <div class="container"> | 
|  | 33     <div id="box1">1</div> | 
|  | 34     <div id="box2a">2a</div> | 
|  | 35     <div id="box2b">2b</div> | 
|  | 36 </div> | 
|  | 37 <div id="box3">3</div> | 
|  | 38 <div id="box4">4</div> | 
| OLD | NEW | 
|---|