Tomé este Pen: https://codepen.io/golle404/pen/BoqrEN y quería hacer que se moviera cada pocos segundos.
Intenté esto:
setTimeout(function() { document.getElementById("move").style.transform = "rotateY(203deg)"; }, 2000);pero esto mueve el objeto una vez y quiero que el cubo gire infinito con 3 paradas.
Entonces, como si el cubo girara a 203 grados y debería permanecer allí durante 2 segundos y moverse a 180 grados, por ejemplo, en un bucle infinito.
Hay una manera de hacerlo ? O acaso no es posible.
Puede usar una animación de fotogramas clave para esto.
Por ejemplo:
@keyframes rotation { 0%, 100% { transform: rotateX(90deg) translateZ(-150px); } 33.333% { transform: translateZ(150px); } 66.666% { transform: rotateY(90deg) translateZ(150px); } }Y luego lo usas así
.my-element { animation: rotation 5s infinite; }Aquí está en combinación con su código del codepen:
.container { margin-top: 150px; } .news-grid { width: 300px; margin: auto; } .news-card { width: 300px; height: 300px; perspective: 800px; perspective-origin: 50% 50%; outline: 1px solid blue; } .face>img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #experiment { -webkit-perspective: 800px; -webkit-perspective-origin: 50% 200px; -moz-perspective: 800px; -moz-perspective-origin: 50% 200px; perspective: 800px; perspective-origin: 50% 200px; } .cube { position: relative; margin: auto; height: 300px; width: 300px; -webkit-transition: -webkit-transform 2s linear; -webkit-transform-style: preserve-3d; -moz-transition: -moz-transform 2s linear; -moz-transform-style: preserve-3d; transition: transform 2s linear; transform-style: preserve-3d; transform: rotateY(245deg); animation: rotation 5s infinite; } .face { position: absolute; height: 260px; width: 260px; padding: 20px; background-color: rgba(50, 50, 50, 0.7); font-size: 27px; line-height: 1em; color: #fff; border: 1px solid #555; border-radius: 3px; } @keyframes rotation { 0%, 100% { transform: rotateX(90deg) translateZ(-150px); } 33.333% { transform: translateZ(150px); } 66.666% { transform: rotateY(90deg) translateZ(150px); } } <div class="container"> <div class="news-grid"> <div class="news-card"> <div class="cube"> <div class="face one"></div> <div class="face two"> <img src="http://images.sixrevisions.com/2010/10/13-01_information_architecture_101_ld_img.jpg" alt="" /></div> <div class="face three"> Information Architecture 101: Techniques and Best Practices </div> </div> </div> </div> </div>Debe usar setInterval , no setTimeout