小编Har*_*vey的帖子

我一直在努力为我一直在研究的项目创建一个3D外观卡片翻转动画类型.不幸的是,我的动画并不完全是3D.

我一直在使用本指南.在第一个例子中,这个人设法使它看起来像窗户背景翻转.但是,当我尝试在JSFiddle上使用相同的代码时,结果与他的不一样.

他的演示代码在下面产生了效果.当卡被翻转时,它会使一侧变小,给人以透视的印象:

在我的JSFiddle上使用他的代码(除了不同的背景),两边看起来在整个时间内保持相同的大小:

有人可以向我解释我错过了什么,或者如何在他的网站上获得相同的透视效果？提前致谢.

他的HTML代码:

<div id="f1_container">
<div id="f1_card" class="shadow">
  <div class="front face">
    <img src="/images/Windows%20Logo.jpg"/>
  </div>
  <div class="back face center">
    <p>This is nice for exposing more information about an image.</p>
    <p>Any content can go here.</p>
  </div>
</div>
</div>

他的CSS代码:

#f1_container {
  position: relative;
  margin: 10px auto;
  width: 450px;
  height: 281px;
  z-index: 1;
}
#f1_container {
  perspective: 1000;
}
#f1_card {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all 1.0s linear;
}
#f1_container:hover #f1_card { …

我正在尝试创建一个自定义记录器,console.log它只包装一个但总是在开头添加一些内容,这使得日志来自我的插件非常清楚.

我想出了以下代码:

var log = function(param1, param2) {
    if (typeof param3 !== 'undefined') {
        console.log('[MyPlugin]', param1, param2, param3);
    } else if (typeof param2 !== 'undefined') {
        console.log('[MyPlugin]', param1, param2);
    }
};

这允许开发人员运行以下内容:

log('foo', 'bar');
// Outputs '[MyPlugin] foo bar'

log('foo');
// Outputs '[MyPlugin] foo'

但我希望这可以改进.

这个实现的问题是:

1. 记录功能仅允许两个参数.如果可以接受许多人会更好.
2. 有很多重复(多次console.log通话).

我试过了什么

我想也许ES6传播操作员会工作:

var log = function(...params) {
    console.log('[MyPlugin]', params);
};

这允许开发人员运行:

log('foo', 'bar');
// Outputs '[MyPlugin] Array [ "foo", "bar" ]'

log('foo');
// Outputs '[MyPlugin] Array …