JS manipulate CSS 3D rotating animation

Question

I am very new to this CSS animation things and I have followed a tutorial making 3D rotating elements from this site http://www.the-art-of-web.com/css/3d-transforms/

This is my rotating 4 sided 3D square: https://jsfiddle.net/k0u8kn4w/

Now I want to use JS to make the side of the square to only rotate once to the second side when I clicked on it. So let's say the initial side is side A (not moving), when I click on it, I want it to rotate to show side B (rotate once 90 deg), when I click on it again, turn to side C, click again then turn to side D, another click turn to side A and so on.

Have tried manipulating the animation-play-state with running and paused, doesn't work, tried also manipulating the rotateY and TranslateZ degree, not sure how to manipulate the keyframes , couldn't find it anywhere.

 @-webkit-keyframes spinner { from { -webkit-transform: rotateY(0deg); } to { -webkit-transform: rotateY(0deg); } } @keyframes spinner { from { -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); } to { -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(-360deg); } } #stage { margin: 1em auto; -webkit-perspective: 1200px; -moz-perspective: 1200px; -ms-perspective: 1200px; perspective: 1200px; } #spinner { -webkit-animation-name: spinner; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 6s; -webkit-animation-play-state: running; animation-name: spinner; animation-timing-function: linear; animation-iteration-count: infinite; animation-duration: 6s; animation-play-state: running; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; } #spinner div, #spinner img { position: absolute; border: 1px solid #ccc; background: rgba(255, 255, 255, 0.8); box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2); } 

 <div id='stage' style='height: 160px; width: 180px;'> <div id='spinner'> <div style='-webkit-transform: rotateY(90deg) translateZ(90px); padding: 0 0px; background: red; width: 180px; height: 160px; display: inline-block;' class='rotating'>A</div> <div style='-webkit-transform: rotateY(180deg) translateZ(90px); padding: 0 0; background: blue; width: 180px; height: 160px; display: inline-block;'>B</div> <div style='-webkit-transform: rotateY(270deg) translateZ(90px); padding: 0 0; background: green; width: 180px; height: 160px; display: inline-block;'>C</div> <div style='-webkit-transform: rotateY(360deg) translateZ(90px); padding: 0 0; background: yellow; width: 180px; height: 160px; display: inline-block;' class='rotating'>D</div> </div> </div> 

Answer 1

You just need to resume animation and wait for 1/4 of animation duration.

Simplified your code (removed vendor prefixes, most of browsers work OK without them, but reapply them if needed). Demo:

 var spinner = document.querySelector("#spinner"); // get animation duration in ms var animationDuration = parseFloat(window.getComputedStyle(spinner)["animation-duration"]) * 1000; spinner.addEventListener("click", function() { // run animation spinner.style["animation-play-state"] = "running"; // pause animation after animationDuration / 4 setTimeout(function() { spinner.style["animation-play-state"] = "paused"; }, animationDuration / 4); }); 

 @keyframes spinner { from { transform: rotateY(0deg); } to { transform: rotateY(-360deg); } } #stage { margin: 1em auto; perspective: 1200px; } #spinner { animation-name: spinner; animation-timing-function: linear; animation-iteration-count: infinite; animation-duration: 6s; animation-play-state: paused; /* new */ transform-style: preserve-3d; } #spinner div, #spinner img { position: absolute; border: 1px solid #ccc; background: rgba(255, 255, 255, 0.8); box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2); } 

 <div id='stage' style='height: 160px; width: 180px;'> <div id='spinner'> <div style='transform: rotateY(90deg) translateZ(90px); padding: 0 0px; background: red; width: 180px; height: 160px; display: inline-block;' class='rotating'>A</div> <div style='transform: rotateY(180deg) translateZ(90px); padding: 0 0; background: blue; width: 180px; height: 160px; display: inline-block;'>B</div> <div style='transform: rotateY(270deg) translateZ(90px); padding: 0 0; background: green; width: 180px; height: 160px; display: inline-block;'>C</div> <div style='transform: rotateY(360deg) translateZ(90px); padding: 0 0; background: yellow; width: 180px; height: 160px; display: inline-block;' class='rotating'>D</div> </div> </div>