| OLD | NEW | 
|---|
| (Empty) |  | 
|  | 1 <!DOCTYPE html> | 
|  | 2 <style> | 
|  | 3 div { | 
|  | 4     width: 100px; | 
|  | 5     height: 100px; | 
|  | 6     background-color: blue; | 
|  | 7     transform-origin: 50% 50%; | 
|  | 8 } | 
|  | 9 .container { | 
|  | 10     transform: rotate(45deg); | 
|  | 11     background-color: red; | 
|  | 12     perspective-origin: 150% 150%; | 
|  | 13     perspective: 500px; | 
|  | 14 } | 
|  | 15 #box1 { | 
|  | 16     transform: rotate(45deg); | 
|  | 17 } | 
|  | 18 #box2 { | 
|  | 19     transform: rotate3d(1,0,0,50deg) translate(200px); | 
|  | 20 } | 
|  | 21 #box3 { | 
|  | 22     transform: rotate3d(1, -2.5, 4, 30deg) translate(200px); | 
|  | 23 } | 
|  | 24 #box4 { | 
|  | 25     transform: rotate3d(0, 0, 0, 45deg); | 
|  | 26 } | 
|  | 27 </style> | 
|  | 28 | 
|  | 29 <div class="container"> | 
|  | 30     <div id="box1">1</div> | 
|  | 31     <div id="box2">2</div> | 
|  | 32 </div> | 
|  | 33 <div id="box3">3</div> | 
|  | 34 <div id="box4">4</div> | 
| OLD | NEW | 
|---|