我试图在点击按钮后进行div翻转,但它似乎没有正常工作,我无法弄清楚原因.我想知道是否有人能够指出我正确的方向并纠正我的错误.
我的代码:
var init = function() {
var card = document.getElementById('card');
document.getElementById('flip').addEventListener('click', function() {
card.toggleClassName('flipped');
}, false);
};
window.addEventListener('DOMContentLoaded', init, false);.container {
width: 200px;
height: 260px;
position: relative;
perspective: 800px;
}
#card {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
transition: transform 1s;
}
#card figure {
margin: 0;
display: block;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
#card .front {
background: red;
}
#card .back {
background: blue;
transform: rotateY(180deg);
}
#card.flipped {
transform: rotateY(180deg); …