菜单3D变换

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

我做了两个小的改动你的样式表。

1. 我设置菜单的width到92%和添加的4%一个margin双方。

   .menuItems { 
       width: 92%; 
       margin: 0 4%; 
   } 
   

2. 我添加了一个顶部/底部的-10pxmargin使物品靠近在一起来抵消添加的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>

这里是上海社会科学院我写换算成以上的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; 
    } 
}