CSS转换不像素完美

Question

我有一个非画布菜单的示例：http://jsfiddle.net/pwghdvoh/

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

使用以下CSS执行此操作：

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

但是我发现在不同的分辨率下，应用程序没有向右移动240px，从顶部和底部移动20px ...如果你看截图，你可以看到它太接近了屏幕的顶部和底部，顶部和底部应该有20px。

这可能是由于包装器的视角不正确造成的吗？

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

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

所以它始终是视口宽度的视角。但这似乎无法解决问题。

有什么想法吗？

Answer 1

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

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

<强> Working Fiddle