CSS3 perspective-exemplo de animação de propriedade origin-Editor online de exemplo(oldtoolbag.com)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<título>CSS3 perspective-exemplo de animação de propriedade origin- Manual básico(oldtoolbag.com)</título>/título>
<style>
.container{
	largura: 125px;
    altura: 125px;
	margem: 50px auto;
  	borda: 4px sólido #a2b058;
    fundo: #f0f5d8;
	/* Chrome, Safari, Opera */
	-webkit-perspective: 300px;
    -webkit-animação: test 4s infinito;
	/* Sintaxe padrão */
    perspective: 150px;
    animação: test 4s infinito; 
}
.container img{
    -webkit-transform: girar3d(1, 0, 0, 60graus); /* Chrome, Safari, Opera */
    transform: girar3d(1, 0, 0, 60graus); /* Sintaxe padrão */
}
/* Chrome, Safari, Opera */
@-webkit-keyframes test {
    50% {-webkit-perspective-origin: 50% top;}
}
/* Sintaxe padrão */
@keyframes test {
    50% {perspective-origin: 50% top;}
}
</<style>
</<head>
<body>
	<p> <strong>Advertência：</strong>：As animações CSS no Internet Explorer 9e versões anteriores não funcionam./p>
<p> <strong>Atenção</strong>：A perspectiva de partida da imagem do "Cartão do Clube" transformada é de “ 50％50％” valor inicial para “ 50％topo” animação, e depois volta ao valor inicial “ 50％50％“até infinito.</p>
	<div class="container">
        <img src="/run/images/club.jpg" alt="Cartão do Clube">
    </div>
</body>
</html>