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 |