CSS 转换不是像素完美的

Question

我有以下 Canvas 外菜单示例:http://jsfiddle.net/pwghdvoh/

当您点击蓝色标题左上角的按钮时，它会移动主应用 View 以显示隐藏的菜单。

它使用以下 CSS 执行此操作:

.showSidebar .app
{
    -webkit-transform:  translateZ(-20px) 
                        translateX(240px);
            transform:  translateZ(-20px)
                        translateX(240px);
}

但是我发现在各种分辨率下，应用程序没有向右移动 240 像素，也没有从顶部和底部偏移 20 像素...如果您查看屏幕截图，您会发现它离屏幕的顶部和底部，顶部和底部应有 20px。

会不会是wrapper的视角不对造成的？

我使用 jQuery 动态执行此操作:

$('.wrapper').css({
    'perspective': $(window).width(),
    '-webkit-perspective': $(window).width()
});

所以始终是视口(viewport)宽度的透视。但这似乎并不能解决问题。

有什么想法吗？

Answer 1

我没有将 width: 100% 和 height: 100% 赋给 .wrapper 类，而是添加了绝对位置并将其拉伸(stretch)到它的父容器是 body 元素。当查看侧边栏时，我将 top 和 bottom 属性指定为 20px，它覆盖了已经提供的 0px 值(value)。

.wrapper {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}
.wrapper.showSidebar {
    top: 20px;
    bottom: 20px;
}

Working Fiddle