Question

第一次在这里张贴......

我遇到CSS3 rotateY（）

的问题

JSFiddle：http://jsfiddle.net/EstSiim/2sKZR/

Chrome，IE10一切正常，但在Firefox中发生了一些奇怪的事情。当您快速单击旋转或旋转+多次时，您可以看到它无法正常工作。（旋转方向改变）

是Firefox的bug吗？

Tnx

HTML：

<div class="orange"></div>  
<input type="button" value="RotateY +" class="rotatey-plus">
<input type="button" value="RotateY -" class="rotatey-min">

CSS：

.orange {
    margin: 60px;
    width: 200px;
    height: 200px;
    border:1px solid black;
    border-radius: 6px;
    background-color: orange;
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;

    -webkit-transform-origin:50% 50% 100px;
    transform-origin:50% 50% 100px;

}

JS：

var positions = {
        ydeg:0,
        pers:400,
    };



    $('.rotatey-plus').on('click', function(){
        positions.ydeg += 90;
        rotate();
    });
    $('.rotatey-min').on('click', function(){
        positions.ydeg -= 90;
        rotate();
    });

    function rotate() {
        $('.orange').css({
            '-webkit-transform': 'perspective('+ positions.pers + 'px) rotateY(' + positions.ydeg + 'deg)',
             'transform': 'perspective('+ positions.pers + 'px) rotateY(' + positions.ydeg + 'deg)'
        });
    }

Answer 1

只有在使用透视功能时才会发生错误。

如果在父级中使用perspective属性，则可以正常工作：

<div class="container"><div class="orange"></div></div>

.container {
    perspective: 1000px;
}


function rotate() {
    $('.orange').css({
     'transform':  'rotateY(' + positions.ydeg + 'deg)'
    });
}

demo

CSS3 rotateY方向firefox

1 个答案: