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>