Question

每当我点击它们时，我都试图让div翻转。我不确定为什么它不起作用。请帮忙。

以下是此代码的演示。 http://langbook.co/testicles-1-2-flashcards/

import SpriteKit

class GameScene: SKScene {

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }

    override init(size: CGSize) {
        super.init(size: size)
        backgroundColor = SKColor.blackColor()
        // let stars = Stars()

        var starNode:SKNode!
        starNode = stars.createStars(CGFloat(30), direction: 1, 
                          scaleX: self.frame.width, scaleY: self.frame.height)
        addChild(starNode)
    }

    override func touchesBegan(touches: Set<NSObject>, withEvent event: UIEvent) {
        //Nothing here yet
    }
}

Answer 1

例如： http://www.w3schools.com/cssref/playit.asp?filename=playcss_backface-visibility

简单的一条CSS线：

animation:mymove 3s infinite;

其中 mymove 是：

@keyframes mymove
    {
    from {transform:rotateY(0deg);}
    to {transform:rotateY(360deg);}
    }

    @-moz-keyframes mymove /* Firefox */
    {
    from {-moz-transform:rotateY(0deg);}
    to {-moz-transform:rotateY(360deg);}
    }

    @-webkit-keyframes mymove /* Opera, Safari, Chrome */
    {
    from {-webkit-transform:rotateY(0deg);}
    to {-webkit-transform:rotateY(360deg);}
    }

    @-ms-keyframes mymove /* Internet Explorer */
    {
    from {-ms-transform:rotateY(0deg);}
    to {-ms-transform:rotateY(360deg);}
    }

示例：

div#myDIV
    {
    animation:mymove 3s infinite;/* <== HERE */
    /* Firefox */
    -moz-animation:mymove 3s infinite;
    -moz-animation-timing-function:linear;
    /* Opera, Safari, Chrome */
    -webkit-animation:mymove 3s infinite;
    -webkit-animation-timing-function:linear;
    }

Answer 2

http://www.w3schools.com/css/css3_2dtransforms.asp

http://www.w3schools.com/css/css3_3dtransforms.asp

不确定你是否尝试过这个但是我解决了你的问题。使用CSS你可以做同样的事情（通过你想要实现的声音）。

希望这会有所帮助。

Answer 3

首先，我会将你的JS移到页面的末尾。

似乎你想在＃flip3D上调用flip（），因为你试图访问它的子元素，如下所示：

var vlib = document.getElementById('flip3D');
vlib.addEventListener('click', flip(vlib));

要翻转，您可以将对象的状态保留在属性中，以了解它所在的一侧。另请注意，将立即调用flip（vlib）;要等待click事件，您需要传递对该函数的引用：

vlib.addEventListener('click', flip);

似乎有效：JSFiddle

Answer 4

JS 部分中的语法和声明存在一些错误。

希望这就是你要找的东西：

https://jsfiddle.net/xrtvhvgf/2/

function flip(){
    if(vlib_front.style.transform){
        el.children[1].style.transform = "";
        el.children[0].style.transform = "";
    } else {
        el.children[1].style.transform = "perspective(600px) rotateY(-180deg)";
        el.children[0].style.transform = "perspective(600px) rotateY(0deg)";
    }
}
var vlib_front = document.getElementById('front');
var el = document.getElementById('flip3D');

el.addEventListener('click', flip);

动画单击时翻转div

4 个答案: