Question

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

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

Answer 2

在JSFiddle中，如果你注释掉以下几行

//container.insertBefore(greenstuff);
//$(greenstuff).appendTo(container);

然后无需取消注释console.log（）调用即可运行。显然，这会导致绿色框“跳”一点，因为它不再在生成的容器中重新定位。

您能否重新审视创建“容器”对象的必要性？

使用jquery .css（）时，rotateY不起作用

2 个答案:

-DEMO-

requestAnimationFrame

polyfill

caniuse