菜單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; 
    } 
}