Как перевернуть в famo.us?

Question

Как я могу сделать this моей поверхности контейнера с famo.us? Моя поверхность контейнера выглядит так:

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] 
    }); 

Итак, я хочу, когда я нажимаю на поверхность, чтобы она вращалась и меняла цвет. Каков наилучший способ сделать это?

Я начинаю с famo.us и javascript, поэтому любая помощь - это хорошая помощь. спасибо за понимание;)

Answer 1

Вы можете использовать Flipper Просмотр и установка задней и передней поверхностей с использованием поверхностей или видов.

Чтобы сделать это, чтобы перевернуть по горизонтали, установите параметр direction: Flipper.DIRECTION_Y, как показано в фрагменте ниже.

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>