Show Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Example of CSS3 perspective Property Animation</title> <style> .container{ width: 125px; height: 125px; margin: 50px auto; border: 4px solid #a2b058; background: #f0f5d8; /* Chrome, Safari, Opera */ -webkit-perspective: 300px; -webkit-animation: test 4s infinite; /* Standard syntax */ perspective: 300px; animation: test 4s infinite; } .container img{ -webkit-transform: rotate3d(1, 0, 0, 60deg); /* Chrome, Safari, Opera */ transform: rotate3d(1, 0, 0, 60deg); /* Standard syntax */ } /* Chrome, Safari, Opera */ @-webkit-keyframes test { 50% {-webkit-perspective: 100px;} } /* Standard syntax */ @keyframes test { 50% {perspective: 100px;} } </style> </head> <body> <p><strong>Warning:</strong> CSS Animations do not work in Internet Explorer 9 and earlier versions.</p> <p><strong>Note:</strong> The perspective view for the transformed "club card" image is animating from the initial value "300px" to "100px", and back to the initial value "300px" again up to infinite times.<p> <div class="container"> <img src="/examples/images/club.jpg" alt="Club Card"> </div> </body> </html>