Changing the backface content on rotation - famo.us

Question

I'm currently rotating a Surface successfully, and made the backface visible by copying the starterkit:
.double-sided {
-webkit-backface-visibility: visible;
backface-visibility: visible;
}
The problem is, I want to change the back, as I'm rotating the image of a playing card, say the Queen of Spades, so the content on the backface needs to change to another image.
At the moment I'm using sprites, so it's mainly the css I'll be updating (changing the background image). I thought there may be a way of adding a class as the rotation goes past 90 degrees, but it seems like a messy approach:
.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;
}
This seems quite messy and was wondering if there was a better approach? Even if I do use this approach, how do I add a class based on the current rotation?
I also tried shoving an element at the back of the surface using z-index, but the browser (chrome) seems to ignore the element sitting below:
.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;
}
And the Surface:
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']
});
This still only shows the first element, so even on a rotation of 180 degrees you see the playingCards.png instead of the playingBackCards.png

Answer 1

You could just use the Flipper View and change the back or front based on your case.
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>