JS操纵CSS 3D旋转动画

Question

我很新的CSS动画的事情，我也跟着教程制作3D从这个网站http://www.the-art-of-web.com/css/3d-transforms/

这是我转4向旋转件双面3D方：https://jsfiddle.net/k0u8kn4w/

现在我想用JS来让广场的一面只在我点击它时旋转一次到第二面。所以我们假设最初的一面是A面（不移动），当我点击它时，我想让它旋转以显示B面（旋转一次90度），当我再次点击它时，转向C面，再次点击然后转向D侧，再次点击转向A侧，以此类推。

试过操纵animation-play-state与运行和暂停，不工作，也试过操纵rotateY和TranslateZ程度，不知道如何操纵keyframes，到处都找不到它。

@-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

你只需要恢复动画和等待动画时长的1/4。

简化您的代码（删除供应商前缀，大多数浏览器在没有它们的情况下都可以正常工作，但如果需要，可以重新应用它们）。演示：

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>