メニュー3D変換

Question

こんにちは私は3D変換メニューを作成していますが、2つの問題があります。

最初の問題：回転要素間の空白を削除したいと思います。

第2の問題私は変換の影響を受ける内部要素を望んでいません。

私のコードは以下の通りです：

* { 
 
    -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. Iは92%にメニューのwidthを設定し、両面に4%のmarginを添加。

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

2. 私が追加されました25pxパディングを相殺するために互いに近接してアイテムを持って-10pxのトップ/ボトムmarginを追加しました。

   .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に変換して書いたSASSです。

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