Question

我预计灰色表面会围绕其中心在其父级的右下角在SAME平面中作为黄色表面旋转。

我缺少什么？

var initialTime = Date.now();    

var grey = new famous.core.Surface({
  size: [500, 500],
  properties: {
    backgroundColor: 'rgba(0, 0, 0, 0.7)',
    color: 'white'
  },
  content: '<div style="padding: 20px">A</div>',
  classes: ['backfaceVisibility']
});

var yellow = new famous.core.Surface({
  properties: {
    backgroundColor: 'rgba(250, 250, 0, 0.7)'
  },
  content: '<h1>ende</h1>',
  size: [200, 200],
  classes: ['backfaceVisibility']
});

var m2 = new famous.core.Modifier({
  transform: function () {
    return famous.core.Transform.rotateZ(0.002 * (Date.now() - initialTime));
  },
  origin: [0.5, 0.5],
  align: [1, 1]
});

var m1 = new famous.core.Modifier({
  transform: function () {
    return famous.core.Transform.rotateY(0.0002 * (Date.now() - initialTime));
  },
  align: [0.5, 0.5],
  origin: [0.5, 0.5]
});

var virtualNode = context.add(m1);
virtualNode.add(yellow);
virtualNode.add(m2).add(grey);

Answer 1

基于我现在对要求的了解。我会说你确实正确设置了它。你可能想要的是让你的两个表面的透视在3d空间中的父修改器节点上移动。同时将父（m1）修改器大小更改为固定大小有助于我们了解它们的放置方式。

mainContext.setPerspective(1000);
var p1 = new Modifier({
    transform: function () {
        return Transform.translate(0, 0, -400);
    }
});

var virtualNode = context.add(p1).add(m1));
virtualNode.add(yellow);
virtualNode.add(m2).add(grey);

<强> Here is a jsFiddle of it working

带旋转的链接修改器

1 个答案: