css - 设置没有动画的css rotateY

Question

我正在制作一个翻转卡 html 元素，单击时它会围绕 Y 轴旋转。这部分工作得很好，尽管有人发现了一个错误，即翻转卡“反向”上的内容偶尔会沿着 y 轴镜像（我已经确定这是因为浏览器被 SCORM 更新和错过了 y 旋转）。我提出的“解决方案”是在初始“翻转”过渡完成时将 y 旋转重置为 0。问题是我找不到如何简单地设置 y 旋转，而无需将其转换/动画到该旋转。我只想立即设置 y 旋转，没有任何动画。

这个答案...... 没有应用过渡的CSS3 rotateY ......说我不应该使用过渡，只是变换，但这正是我正在做的：

$("#card"+element.attr('id')).css({ '-webkit-transform' : 'rotateY( 0deg)', '-moz-transform' : 'rotateY( 0deg)', '-o-transform' : 'rotateY( 0deg)', 'transform' : 'rotateY( 0deg)' });

我也试过：

$("#card"+element.attr('id')).css({ '-webkit-transform' : 'matrix(1,0,0,1,0,0)', '-moz-transform' : 'matrix(1,0,0,1,0,0)', '-o-transform' : 'matrix(1,0,0,1,0,0)', 'transform' : 'matrix(1,0,0,1,0,0)' });

在 css 中定义了一个转换：

.flipcard.flipped {
    -webkit-transform: rotateY( 180deg);
    -moz-transform: rotateY( 180deg);
    -o-transform: rotateY( 180deg);
    transform: rotateY( 180deg);
}

.back {
    -webkit-transform: rotateY( 180deg);
    -moz-transform: rotateY( 180deg);
    -o-transform: rotateY( 180deg);
    transform: rotateY( 180deg);
    padding: 30px;
}

.flipcard {
    box-shadow: 0px 0px 5px #888888;    
    transition: transform 3500ms ease;
    margin-bottom:15px;
    min-height:480px;
    overflow:hidden;
}

...那么这是否也会影响添加到元素的任何其他转换？老实说，我是 CSS 过渡的新手，所以我不能 100% 确定最初的翻转过渡是如何应用的。

再一次，任何帮助将不胜感激！

编辑
澄清：我正在尝试通过第一次单击 cardflip 元素时触发的 setTimeout 函数重置 rotateY 属性。这是它目前的样子：

setTimeout(function(){
                        console.log("Rotation should reset to 0?");
                        $("#card"+element.parent().attr('id')).css({ '-webkit-transition-property' : 'none !important', '-moz-transition-property' : 'none !important', '-o-transition-property' : 'none !important', 'transition-property' : 'none !important' });
                        $("#card"+element.parent().attr('id')).css({ '-webkit-transform' : 'rotateY( 0deg)', '-moz-transform' : 'rotateY( 0deg)', '-o-transform' : 'rotateY( 0deg)', 'transform' : 'rotateY( 0deg)' });
                    }, 3600);

延迟比旋转动画长一点。这个解决方案的问题是其他卡上的后续“翻转”变得混乱（我假设是因为转换属性现在设置为不更改）。当初始“翻转”动画完成时，我只想将单击的卡片翻转的 rotateY 属性设置为 0，而不用动画到新值。当然，这很简单。

标签： cssrotationcss-transitionscss-transforms