我试图在单击按钮时为 .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)";
}
最佳答案
你需要:
window.requestAnimationFrame(function () {
greenstuff.style.webkitTransform = "rotateY(180deg)";
});
-DEMO-
requestAnimationFrame
polyfill
caniuse
关于javascript - 使用 jquery .css() 时 rotateY 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26724734/