0

ホバー時にそれぞれ同じ 3d 効果を持つ 4 つのボタンを持つメニューを作成しようとしていますが、パースペクティブは個々の要素ではなく親要素に適用されているようです。

これがどのように見えるかです：

ここに画像の説明を入力

最初の要素は実際にホバーされています (スクリーンショットからカーソルが削除されました)。

HTML:

        <nav>
            <ul>
                <div><li>test1</li></div>
                <div><li>test2</li></div>
                <div><li>test3</li></div>
                <div><li>test4</li></div>
            </ul>
        </nav>

CSS:

nav{
  height: 100px;
}
nav div{
    -webkit-perspective: 200px;
  -moz-perspective: 200px;
  perspective: 200px;
}
nav ul li{
  width: 22%;
  height: 100%;
  float: left;
  margin: 0 1.5% 0 1.5%;
  padding: 0.6em 0;
  text-align: center;
  background: #BBCFCE;
  cursor: pointer;

  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;

  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
nav ul li:after{
  content: '';
  position: absolute;
  z-index: -1;

  width: 20%;
  height: 100%;
  left: -20%;
  top: 0;
  background: #54CED3;

  -webkit-transform-origin: 100% 0%;
  -webkit-transform: rotateY(-90deg);
  -moz-transform-origin: 100% 0%;
  -moz-transform: rotateY(-90deg);
  -ms-transform-origin: 100% 0%;
  -ms-transform: rotateY(-90deg);
  transform-origin: 100% 0%;
  transform: rotateY(-90deg);
}
nav ul li:hover{
  -webkit-transform: rotateY(15deg);
  -moz-transform: rotateY(15deg);
  -ms-transform: rotateY(15deg);
  transform: rotateY(15deg);
}

div ラッパーを削除して、パースペクティブを直接 li に適用すると、同じ問題が発生します。パースペクティブをまったく使用しないと、回転が小さくても効果が得られ、カーソルがli要素の右50％を超えると、ホバー状態から何も変化しません（カーソルポインターと同様に効果が変化します）。

私は何を間違っていますか？

4

1 に答える 1

2

あなたの問題は、3d 変換 (ほとんど) ではなく、サイジング システムに起因します。

HTML を見ると、ul が 4 つの div に分割されているように見えます。ただし、div のサイズは依然として ul と同じであり、幅を 22% に設定するのはこれらの子です。これは、div のサイズが誤解を招き、後でエラーが発生することを意味します。

私は、li から div にほとんどの次元化プロパティを変更しました。

nav{
  height: 100px;
}
nav div{
    -webkit-perspective: 200px;
  -moz-perspective: 200px;
  perspective: 200px;
    -webkit-perspective-origin: left center;
    -moz-perspective-origin: left center;
    perspective-origin: left center;
      width: 22%;
  height: 40px;
  float: left;
  margin: 0 1.5% 0 1.5%;
  padding: 0.6em 0;
  text-align: center;
}
nav ul li{
  height: 100%;

  background: #BBCFCE;
  cursor: pointer;

  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;

  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}
nav ul li:after{
  content: '';
  position: absolute;
  z-index: -1;

  width: 20%;
  height: 100%;
  left: -20%;
  top: 0;
  background: #54CED3;

  -webkit-transform-origin: 100% 0%;
  -webkit-transform: rotateY(-90deg);
  -moz-transform-origin: 100% 0%;
  -moz-transform: rotateY(-90deg);
  -ms-transform-origin: 100% 0%;
  -ms-transform: rotateY(-90deg);
  transform-origin: 100% 0%;
  transform: rotateY(-90deg);
}
nav ul li:hover{
  -webkit-transform: rotateY(15deg);
  -moz-transform: rotateY(15deg);
  -ms-transform: rotateY(15deg);
  transform: rotateY(15deg);
}

また、ホバー時に疑似要素を表示させたいというご要望も承りました。これを実現するために、視点の原点を左に設定しました。そうすれば、要素を最初から見ることができます

デモ

ちなみに注意点２

1) 適切な HTML スタイルは、li が ul の子であることです。私は直系の子孫を意味し、子の子ではありません。

2) コードにフィドルを作成すると、他の人があなたを助けやすくなります。

于 2013-12-01T08:56:54.290 に答える