CSS3宽度和填充问题

Question

我正在尝试创建一个翻转的3D链接菜单。由于这些元素的位置是绝对的，所以我很难接受数据分配，它似乎在顶部和左侧增加了1到2个像素，位于不同的视图上：

以下是1366 X 768视口上的样子：

​

​

以下是1024X768视图中的样子：

​

​

以下是480 X 768 px上的视图

​

​

这是我的CSS：

.demo-3  {
  z-index: 1;
  position: relative;
}

.demo-3 a {
  margin: 0 18px;
  overflow: hidden;

}

.demo-3 a span {
  background: #314559;
  display: block;
  padding: 10px 20px;

-webkit-backface-visibility: hidden;
backface-visibility: hidden;

  -webkit-transition:-webkit-transform 0.1s;
   -moz-transition:   -moz-transform 0.1s;
     -o-transition:     -o-transform 0.1s;
        transition:        transform 0.1s;


}

.demo-3 a::before {   
  content: attr(data-text);
  right: -20px;
  width: 100%;
  height: 100%;
  color: #314559;
  background: #fff;
  z-index: -1;
  position: absolute;
  padding: 10px 20px;
  top: 0;

-webkit-backface-visibility: hidden;
backface-visibility: hidden;

-webkit-transition:-webkit-transform 0.2s;
   -moz-transition:   -moz-transform 0.2s;
     -o-transition:     -o-transform 0.2s;
        transition:        transform 0.2s;

-webkit-transform:translateY(-25%);
   -moz-transform:translateY(-25%);
    -ms-transform:translateY(-25%);
     -o-transform:translateY(-25%);
        transform:translateY(-25%);
}

.demo-3 a:hover span,
.demo-3 a:focus span {
-webkit-transform:translateY(100%);
   -moz-transform:translateY(100%);
    -ms-transform:translateY(100%);
     -o-transform:translateY(100%);
        transform:translateY(100%);
}

.demo-3 a:hover::before,
.demo-3 a:focus::before {
-webkit-transform:translateY(0%);
   -moz-transform:translateY(0%);
    -ms-transform:translateY(0%);
     -o-transform:translateY(0%);
        transform:translateY(0%);
}

以下是我想要达到的目标：

1. 我想把这些额外的1 1px安装在所有的视口上。
2. 我如何创建一个更多的三维外观，看上去像一个盒子三维时翻转？
3. 如何在所有视图中确定绿色背景的高度。如果你调整你的屏幕大小，它会看起来绿色背景是有点短，特别是在小视口。

到目前为止，我的代码的jsFiddle：http://jsfiddle.net/52qcj2x0/6/

知道怎么做到这两件事吗？

Answer 1

由于阴影的存在，物体似乎处于三维。物体的阴影给出了三维(Z轴)的效果。因此，要提供一点3D效果，请尝试将框影样式属性提供给Box。

盒子的影子看起来像：

​

box-shadow: 10px 10px 5px #888888;

​

这些参数分别是阴影的水平深度、垂直深度、模糊度和颜色。

Answer 2

这个答案只回答你的第一点.

这似乎是::before元素的舍入错误，因为您有width: 100%，但在其父元素上没有设置显式宽度。

您可以尝试设置block或给这些元素一个显式的宽度。

Answer 3

我想安德烈·迪翁的解决方案将适用于问题1。

解决了你的两个问题：

你的目标是一个盒翻转。为了让它看起来更3d，你需要在转换发生的时候，把它绕着X轴旋转，然后“保持-3D”。看一看教程，更好地理解它。

你的问题3不够清楚，但我所理解的是，当使用较小的屏幕大小时，你想要堆叠你的翻盖盒。你可以看看自举网格布局。

希望这能有所帮助！