CSS3 perspective-Ejemplo de animación de propiedad origin-Editor en línea de ejemplo(oldtoolbag.com)

!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 perspective-Ejemplo de animación de propiedad origin- Tutoriales básicos(oldtoolbag.com)</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;
	/* Sintaxis estándar */
    perspective: 150px;
    animation: test 4s infinite; 
}
.container img{
    -webkit-transform: rotate3d(1, 0, 0, 60deg); /* Chrome, Safari, Opera */
    transform: rotate3d(1, 0, 0, 60deg); /* Sintaxis estándar */
}
/* Chrome, Safari, Opera */
@-webkit-keyframes test {
    50% {-webkit-perspective-origin: 50% top;}
}
/* Sintaxis estándar */
@keyframes test {
    50% {perspective-origin: 50% top;}
}
</<style>
</<head>
<body>
	<p> <strong>Advertencia：</strong>：Las animaciones CSS en Internet Explorer 9y no funciona en versiones anteriores.</p>
<p> <strong>Nota</strong>：El punto de partida de la perspectiva de la imagen de "Tarjeta de Club" convertida en CSS se encuentra en " 50％50％"del valor inicial a " 50％al principio" de la animación de desplazamiento hacia arriba, luego vuelve al valor inicial " 50％50％"hasta el infinito.</p>
	<div class="container">
        <img src="/run/images/club.jpg" alt="Tarjeta de Club">
    </div>
</body>
</html>