旋转时更改背面内容
Changing the backface content on rotation
我目前正在成功旋转 Surface,并通过复制 starterkit 使背面可见:
.double-sided {
-webkit-backface-visibility: visible;
backface-visibility: visible;
}
问题是,我想换背面,因为我正在旋转一张扑克牌的图像,比如黑桃皇后,所以背面的内容需要换成另一张图像。
目前我正在使用 sprites,所以主要是 css 我会更新(更改背景图像)。我认为可能有一种方法可以在旋转超过 90 度时添加 class,但这似乎是一种混乱的方法:
.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;
}
这看起来很乱,想知道是否有更好的方法?即使我确实使用这种方法,我如何根据当前旋转添加 class?
我还尝试使用 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 度,您也会看到 playingCards.png 而不是 playingBackCards.png
您可以使用 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>
我目前正在成功旋转 Surface,并通过复制 starterkit 使背面可见:
.double-sided {
-webkit-backface-visibility: visible;
backface-visibility: visible;
}
问题是,我想换背面,因为我正在旋转一张扑克牌的图像,比如黑桃皇后,所以背面的内容需要换成另一张图像。
目前我正在使用 sprites,所以主要是 css 我会更新(更改背景图像)。我认为可能有一种方法可以在旋转超过 90 度时添加 class,但这似乎是一种混乱的方法:
.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;
}
这看起来很乱,想知道是否有更好的方法?即使我确实使用这种方法,我如何根据当前旋转添加 class?
我还尝试使用 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 度,您也会看到 playingCards.png 而不是 playingBackCards.png
您可以使用 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>