Question

您好我正致力于创建3D转换菜单但有两个问题。

第一个问题：我想删除旋转元素之间的空白区域。

第二个问题我不想要受变换影响的内在元素。

我的代码如下：

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
html,body{
    height:100%;
}
body{
    font-family:Raleway,'Open Sans','Comic Sans MS';
}
.menuItems {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
    -moz-perspective: 500px;
    -ms-perspective: 500px;
    -webkit-perspective: 500px;
    perspective: 500px;
}
.menuItems .item{
    padding:25px;
    font-size:20px;
    color:#ffffff;
}
.menuItems .item:nth-child(odd) {
    background-color: #01f668;
    -moz-transform: rotateX(30deg);
    -ms-transform: rotateX(30deg);
    -o-transform: rotateX(30deg);
    -webkit-transform: rotateX(30deg);
    transform: rotateX(30deg);
}
.menuItems .item:nth-child(even) {
    background-color: #24fb7e;
    -moz-transform: rotateX(-30deg);
    -ms-transform: rotateX(-30deg);
    -o-transform: rotateX(-30deg);
    -webkit-transform: rotateX(-30deg);
    transform: rotateX(-30deg);
}
.menuItems .item a{
    text-decoration:none;
    color:#ffffff;
}

<ul class="menuItems">
    <li class="item"><a href="#">Home</a></li>
    <li class="item"><a href="#">About</a></li>
    <li class="item"><a href="#">Services</a></li>
    <li class="item"><a href="#">Portfolio</a></li>
    <li class="item"><a href="#">Testimonials</a></li>
    <li class="item"><a href="#">Contact</a></li>
</ul>

Answer 1

我对你的样式表进行了两处小改动。

我将菜单的width设置为92%，并向margin添加了4%双方。
```
.menuItems {
  width: 92%;
  margin: 0 4%;
}
```
我添加了margin的{{1}}的顶部/底部-10px，使项目更加靠近，以抵消添加的25px填充。
```
.menuItems .item {
  margin: -10px 0;
}
```

如果你想保留透视图的超链接，你需要将你的项目包装在div中并给它relative定位并制作链接和另一个div（用于背景）absolute。

以下是该替代方法的演示： Perspective Fix - JSFiddle Demo

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  font-family: Raleway, 'Open Sans', 'Comic Sans MS';
}

.menuItems {
  width: 92%;
  height: 100%;
  margin: 0 4%;
  padding: 0;
  list-style-type: none;
  text-align: center;
  -webkit-perspective: 500;
  -moz-perspective: 500;
  -ms-perspective: 500;
  perspective: 500;
}

.menuItems .item {
  padding: 25px;
  margin: -10px 0;
  font-size: 20px;
  color: #ffffff;
}

.menuItems .item:nth-child(odd) {
  background-color: #01f668;
  -webkit-transform: rotateX(30deg);
  -moz-transform: rotateX(30deg);
  -ms-transform: rotateX(30deg);
  -o-transform: rotateX(30deg);
  transform: rotateX(30deg);
}

.menuItems .item:nth-child(even) {
  background-color: #24fb7e;
  -webkit-transform: rotateX(-30deg);
  -moz-transform: rotateX(-30deg);
  -ms-transform: rotateX(-30deg);
  -o-transform: rotateX(-30deg);
  transform: rotateX(-30deg);
}

.menuItems .item a {
  text-decoration: none;
  color: #ffffff;
}

<ul class="menuItems">
  <li class="item"><a href="#">Home</a></li>
  <li class="item"><a href="#">About</a></li>
  <li class="item"><a href="#">Services</a></li>
  <li class="item"><a href="#">Portfolio</a></li>
  <li class="item"><a href="#">Testimonials</a></li>
  <li class="item"><a href="#">Contact</a></li>
</ul>

这是我写的SASS转换为上面的CSS。

Original JSFiddle Demo

$deg-skew: 30deg;
$odd-color: #01f668;
$even-color: #24fb7e;

@mixin rotate-x($deg) {
  -webkit-transform: rotateX($deg);
     -moz-transform: rotateX($deg);
      -ms-transform: rotateX($deg);
       -o-transform: rotateX($deg);
          transform: rotateX($deg);
}
@mixin perspective($value) {
  -webkit-perspective: $value;
     -moz-perspective: $value;
      -ms-perspective: $value;
          perspective: $value;
}

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

html, body {
  height: 100%;
}
body {
  font-family: Raleway, 'Open Sans', 'Comic Sans MS';
}

.menuItems {
  @include perspective(500);
  width: 92%;
  height: 100%;
  margin: 0 4%;
  padding: 0;
  list-style-type: none;
  text-align: center;

  .item {
    padding: 25px;
    margin: -10px 0;
    font-size: 20px;
    color: #ffffff;

    &:nth-child(odd) {
      @include rotate-x($deg-skew);
      background-color: $odd-color;
    }

    &:nth-child(even) {
      @include rotate-x(-$deg-skew);
      background-color: $even-color;
    }
  }

  a {
    text-decoration: none;
    color: #ffffff;
  }
}

菜单3D变换

1 个答案: