CSS3宽度和填充问题

Question

我正在尝试创建一个翻转3D链接菜单。由于这个元素是绝对定位的，我很难对数据进行分析，它似乎在不同视口的顶部和左侧增加了额外的1或2个像素：

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

这是1024 X 768视口的样子：

以下是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. 我想在所有视口上修复这些额外的1px
2. 如何在翻转时创建更像3D的3D外观？
3. 如何在所有视口上修复绿色背景的高度。如果要调整屏幕大小，看起来绿色背景有点短，特别是在小视口上。

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

知道如何获得这两个吗？

Answer 1

div#example
  {
    width:50%;
    height:50%;
    background-color:#40b3df;
    color:#ffffff;
    padding:5%;
    font-size:200%;
  }

<div id="example">
  Sample Text
</div>

使用百分比（％）

删除额外保证金的最佳方法是以百分比（％）[甚至是字体大小]提供所有保证金和填充。这样做也是一种很好的做法，因为这样，您的页面将与所有其他屏幕分辨率成比例。

例如@bwegs：

div#example { padding:5%; /*or padding:5% 4.5% 5% 4.5%; */ font-size:20%; }

然后例如，如果'div #example'的宽度设置为屏幕尺寸的50％，那么填充将是50％的5％，这意味着5％相当于屏幕尺寸的10％< / p>

Answer 2

由于阴影，对象似乎在3维中。对象的阴影给出了第三维（Z轴）的效果。因此，为了给出一些3D效果，请尝试将box-shadow样式属性赋予Box。

盒子阴影看起来像是：

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

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

Answer 3

此答案仅针对您的第一点。

这些似乎是您的::before元素的四舍五入错误，因为您有width: 100%但未在其父级上设置明确的宽度。

您可以尝试设置.nav a's display to block或give those elements an explicit width。

Answer 4

我猜André Dion的解决方案适用于问题1。

解决您的2个问题：
你的目标是box flip。为了使它看起来更像3D，你需要实际围绕X轴旋转它，并在转换发生时“保留-3d”。看一下教程，以便更好地理解它。

您的问题3不够清楚，但我所理解的是，当您使用较小的屏幕尺寸时，您希望堆叠翻盖盒。您可以查看bootstrap grid layout。

希望这有帮助！

Answer 5

关于3d，请检查此笔http://codepen.io/robbue/pen/hJDlA

我也有更新代码

＆＃13;

＆＃13;

html, 
body{
margin: 0;
padding: 0;
}

#container-1{
background: #314559;
width: 100%;
height: auto;
}

*{
    box-sizing: border-box;
}

h1, h2, h3{
    text-align: center;

}

h1{
    font-family: 'Lato', Arial, sans-serif;
    font-weight: 300;
    font-size: 52px;
    padding: 110px 0 20px 0;
    color: #fff;

}

h3{
    font-family: 'Lato', Arial, sans-serif;
    font-weight: 400;
    font-size: 23px;
    margin-top: 15px;
    color: #9f9e9b;
}



a.back{
  font-family: 'Lato', Arial, sans-serif;
    font-weight: 400;
    float: left;
    text-decoration: none;
    font-size: 16px;
  color: #314559;
  padding: 20px 15px;
  border-right: 1px solid #c6d0da;
  text-transform: uppercase;

}


a.next{
  font-family: 'Lato', Arial, sans-serif;
    font-weight: 400;
    float: right;
text-decoration: none;
   font-size: 16px;
  color: #314559;
  padding: 20px 15px;
border-left: 1px solid #c6d0da;
 text-transform: uppercase;
}

a.back:hover, a.next:hover{
background: #5f6f81;
color: #fff;
}


/* LINK GROUP
-------------------------------------------------*/

.link-group-1{
  background: #4E86BF;
  padding: 6.04% 0 11% 0;
  margin-top: 80px;
  text-align: center;
}


.link-group-2{
  background: #FF8981;
   padding: 6.04% 0 11% 0;
  margin-top: 80px;
  height: auto;
  text-align: center;
}

.link-group-3{
  padding: 6.04% 0 11.5% 0;
  background: #2ecc71;
  margin-top: 80px;
  height: auto;
  text-align: center;
}



.link-group-4{
  background: #f8953e;
   padding: 6.04% 0 11.3% 0;
  margin-top: 80px;
  height: auto;
  text-align: center;
}


i{ margin-right: 8px;}

nav { display: inline-block; }


nav a {
  position: relative;
  display: inline-block;
  margin: 12px 20px;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 28px;
  font-family: 'Lato', Arial, sans-serif;
}

nav a:hover,
nav a:focus {
  outline: none;
}


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

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

     

}

.demo-3 a span {
  display: block;
  padding: 10px 20px;
background: #314559; 
-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: 0;
  height: 100%;
  color: #314559;
  background: #fff;
  z-index: -1;
  position: absolute;
  padding: 10px 20px;
  top: 0;
    left: 0;
    text-align: center;
    bottom: 0;
    margin: 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%);
}

＆＃13;

<div id="container-1">
  <h1>TESTING TESTING TESTING</h1>
  <h3>TESTING TESTING</h3>

  <div class="link-group-3">
<nav class="demo-3">
    <a href="demo1.html" data-text="Demo 1"><span>Demo 1</span> </a>
    <a href="demo2.html" data-text="Demo 2"><span>Demo 2</span></a>
    <a href="demo3.html" data-text="Demo 3"></i> <span>Demo 3</span></a>
    <a href="demo4.html" data-text="Demo 4"></i> <span>Demo 4</span></a>
</nav>







  </div>

＆＃13;

＆＃13;

＆＃13;

关于问题3 您可以使用vh https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/

Answer 6

您的第一个问题

它没有为我添加这些额外的像素。你使用的是什么浏览器？我使用的是Chrome。

你的第二个

虽然box-flips / preserving-3d会起作用，但除非你使用以下两种方法之一，否则你永远不会真正获得真正的3D效果：

1. 您可以尝试在按钮的白色部分进行转换，鼠标悬停时将按钮从灰色变为白色，就像阴影一样。也许你的蓝色部分也一样。

2. 获得3D效果的最佳方法是使用WebGL。它很难，它适用于大多数浏览器，但它看起来非常好看。这将允许您使用可以旋转的实际3D棱镜。您应该使用Three.JS。

Answer 7

这样做会不会那么容易：

.demo-3 a {
  background: #314559;
}

如果您希望整个span具有相同的背景颜色，请

而不仅仅是<a>？