| <!DOCTYPE html> |
| |
| <html> |
| <head> |
| <style> |
| .box { |
| height: 80px; |
| width: 80px; |
| background-color: red; |
| |
| animation-name: animation; |
| animation-duration: 1000000000s; |
| animation-delay: -250000000s; |
| animation-timing-function: linear; |
| } |
| |
| .test { |
| height: 80px; |
| width: 80px; |
| perspective: 250px; |
| border: 1px solid black; |
| background: green; |
| } |
| |
| @keyframes animation { |
| 0% { transform: rotateY(0); } |
| 100% { transform: rotateY(-1turn); } |
| } |
| </style> |
| </head> |
| <body> |
| |
| <div class="test"> |
| <div class="inner box"> |
| </div> |
| </div> |
| |
| </body> |
| </html> |
