| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <style> | 2 <style> |
| 3 #perspective { | 3 #perspective { |
| 4 -webkit-animation: anim 1s infinite; | 4 -webkit-animation: anim 1s infinite; |
| 5 height: 150px; | 5 height: 150px; |
| 6 width: 150px; | 6 width: 150px; |
| 7 margin: 50px; | 7 margin: 50px; |
| 8 padding: 10px; | 8 padding: 10px; |
| 9 } | 9 } |
| 10 @-webkit-keyframes anim { | 10 @-webkit-keyframes anim { |
| 11 0% { -webkit-perspective: 150px; } | 11 0% { -webkit-perspective: 150px; } |
| 12 100% { -webkit-perspective: 150px; } | 12 100% { -webkit-perspective: 150px; } |
| 13 } | 13 } |
| 14 #transform { | 14 #transform { |
| 15 width: 150px; | 15 width: 150px; |
| 16 height: 150px; | 16 height: 150px; |
| 17 background: blue; | 17 background: blue; |
| 18 -webkit-transform: rotateY(45deg); | 18 transform: rotateY(45deg); |
| 19 } | 19 } |
| 20 </style> | 20 </style> |
| 21 <div id="perspective"> | 21 <div id="perspective"> |
| 22 <div id="transform"> | 22 <div id="transform"> |
| 23 </div> | 23 </div> |
| 24 </div> | 24 </div> |
| OLD | NEW |