更改旋转时的背面内容

Question

我目前正在成功旋转 Surface，并通过复制 starterkit 使背面可见：

.double-sided {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}

问题是，我想改变背面，因为我正在旋转扑克牌的图像，比如黑桃皇后，所以背面的内容需要更改为另一个图像。

目前我正在使用精灵，所以主要是我要更新的 css（更改背景图像）。我认为可能有一种方法可以在旋转超过 90 度时添加一个类，但这似乎是一种混乱的方法：

.card {
  width: 141px;
  height: 191px;
  background-image: url(/assets/images/playingCards.png);
  background-repeat: no-repeat;
}

.card.display-back {
  background-image: url(/assets/images/backofCard.png);
}

.double-sided {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}

这似乎很混乱，想知道是否有更好的方法？即使我确实使用了这种方法，如何根据当前轮换添加一个类？

我还尝试使用 z-index 将元素推到表面的背面，但浏览器（chrome）似乎忽略了位于下方的元素：

.card {
  width: 141px;
  height: 191px;
  background-image: url(/assets/images/playingCards.png);
  background-repeat: no-repeat;
  z-index: 2;
  position: absolute;
}

.card[data-suit=spade][data-number=Q] { background-position: 0 0; }
.card[data-suit=spade][data-number=K] { background-position: 0px -190px; }
.card[data-suit=spade][data-number=J] { background-position: 0px -380px; }

.card.facedown {
  background-image: url(/assets/images/playingCardBacks.png);
  z-index: 1;
}

还有表面：

var queen = new Surface({
  content: '<div class="card" data-suit="spade" data-number="Q"></div><div class="card facedown"></div>',
  overFlow: 'hidden',
  size: [141, 191],
  classes: ['double-sided']
});

这仍然只显示第一个元素，因此即使旋转 180 度，您也会看到 playCards.png 而不是 playingBackCards.png

Answer 1

您可以只使用 Flipper 视图并根据您的情况更改背面或正面。

define('main',function(require, exports, module) {
    var Engine     = require("famous/core/Engine");
    var Surface    = require("famous/core/Surface");
    var Flipper    = require("famous/views/Flipper");
    var Modifier   = require("famous/core/Modifier");

    var mainContext = Engine.createContext();
    mainContext.setPerspective(500);

    var flipper = new Flipper();

    var frontSurface = new Surface({
        size : [200, 200],
        content : 'front',
        properties : {
            background : 'red',
            lineHeight : '200px',
            textAlign  : 'center'
        }
    });

    var backSurface = new Surface({
        size : [200, 200],
        content : 'back',
        properties : {
            background : 'blue',
            color : 'white',
            lineHeight : '200px',
            textAlign  : 'center'
        }
    });

    flipper.setFront(frontSurface);
    flipper.setBack(backSurface);

    var centerModifier = new Modifier({
        align : [.5,.5],
        origin : [.5,.5]
    });

    mainContext.add(centerModifier).add(flipper);

    var toggle = false;
    Engine.on('click', function(){
        var angle = toggle ? 0 : Math.PI;
        flipper.setAngle(angle, {curve : 'easeOutBounce', duration : 500});
        toggle = !toggle;
    });
});
require(['main']);

.double-sided {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://requirejs.org/docs/release/2.1.16/minified/require.js"></script>
<script src="http://code.famo.us/lib/requestAnimationFrame.js"></script>
<script src="http://code.famo.us/lib/classList.js"></script>
<script src="http://code.famo.us/lib/functionPrototypeBind.js"></script>

<link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.3.5/famous.css" />

<script src="http://code.famo.us/famous/0.3.5/famous.min.js"></script>