Question

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

这个答案...... CSS3 rotateY without transitions applied ...说我不应该使用转换，只是转换，但这正是我正在做的事情：

$("#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);

延迟比旋转动画稍长。这个解决方案的问题是随后的翻转＆＃39;在其他卡上搞砸了（我假设因为过渡属性现在设置为不被更改）。 我只想将点击的卡片的rotateY属性设置为0，以便在内容“翻转”时将其翻转为0。动画已经完成，没有动画到新的值。当然这很简单。

设置没有动画的{c} rotateY

0 个答案: