0

我正在尝试创建一个带有 4 个按钮的菜单，每个按钮在悬停时具有相同的 3d 效果，但似乎透视应用于父元素而不是单个元素。

这是它的样子：

在此处输入图像描述

第一个元素实际上是悬停在上面（光标已从屏幕截图中删除）。

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 分成四个 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);
}

另外，我知道您希望伪元素在悬停时显示。为此，我将透视原点设置在左侧；这样你就可以从一开始就看到元素

演示

顺便说一句，2个笔记

1) 正确的 HTML 样式是 li 是 ul 的子级。我的意思是直系后代，而不是孩子的孩子。

2）如果你用你的代码创造了一个小提琴，你会让其他人更容易帮助你。

于 2013-12-01T08:56:54.290 回答