How to flip in famo.us? - famo.us

Question

How I can do this to my Container Surface with famo.us? My container surface looks like this:
var input1Fix=new ContainerSurface({
size:[241,40],
properties:{
backgroundColor:'black',
overflow:'hidden'
}
});
input1FixModifier= new Modifier({
origin:[1, 0.5],
align:[1, 0.5]
});
var mailContainer= new ContainerSurface({
size:[40,40],
properties:{
backgroundColor:'#483f3e',
overflow:'hidden'
}
});
var mailContainerModifier= new Modifier({
origin:[0, 0.5],
align:[0, 0.5]
});
var mail= new ImageSurface({
size:[20, 20],
content:'img/mail.png',
overflow:'hidden'
});
var mailModifier= new Modifier({
origin:[0.5, 0,5],
align:[0.5, 0,5],
transform: Transform.translate(0, 10)
});
var input1= new InputSurface({
size:[200,40],
placeholder:' E-mail:',
properties:{
backgroundColor:'#483f3e',
border:'#483f3e',
color:'#9d9492',
overflow:'hidden'
}
});
var input1Modifier=new Modifier({
origin:[0.5,0.5],
align:[0.5,0.5]
});
So, I want when I click on surface that it rotates and changes color. What's the best way to do that?
I'm beginner with famo.us and javascript so, any help is good help. thanks for understanding ;)

Answer 1

You can use the Flipper View and set the back and front using surfaces or views.
To get it to flip horizontally, set the option direction: Flipper.DIRECTION_Y as in the snippet below.
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({
direction: Flipper.DIRECTION_Y
});
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>