javascript - 使用 jquery .css() 时 rotateY 不起作用

Question

我试图在单击按钮时为 .front div 提供翻转效果。但是不知何故，当我添加 jquery .css() 时，我将无法看到翻转效果。如果我在设置 .css() 之后调用此 console.log($(greenstuff).css('left'));，它将起作用。怎么会？我需要容器来添加透视属性，无论如何我可以解决这个问题吗？谢谢

http://jsfiddle.net/do2owwnk/44/

HTML:

<div class="front">
    <p>!!!!!!!!!!!!!!!!!!!FRONT</p>
</div>

<br></br>
<button class="but" onclick="myFunction()">Click me</button>

CSS:

.front {
        transition: 2s;
        transform-style: preserve-3d;
        border-style: solid;
        border-width: 5px;
        position:relative;
        backface-visibility: hidden;

        background-color:green;
        top: 0;
        left: 0;
        width: 320px;
        height: 250px;
        margin-left: 0,
        margin-top: 0,
    }
    .but {
        position:absolute;
        top: 300px;
    }

JavaScript:

function myFunction() {
    //greenstuff is the div to flip
    var greenstuff = document.querySelector(".front");
    //creating a div
    var container = $('<div></div>');

    container.css({
        position: 'absolute',
            width: '320px',
            height: '250px',
        perspective:'800px'
    });
    container.insertBefore(greenstuff);
    $(greenstuff).appendTo(container);

    $(greenstuff).css({
                    position: 'absolute',
                    left: 0,
                    top: 0,
                    'margin-left': 0,
                    'margin-top': 0
                });

    //if you uncomment this line of code, it will work, why?
    //console.log($(greenstuff).css('left'));

    greenstuff.style.webkitTransform = "rotateY(180deg)";

}

Answer 1

你需要:

window.requestAnimationFrame(function () {
    greenstuff.style.webkitTransform = "rotateY(180deg)";
});

-DEMO-

requestAnimationFrame

polyfill

caniuse