Question

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

以下是它的样子：

enter image description here

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

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％时，它会立即生效。它会从悬停状态交替显示（效果随光标指针而变化）。

我做错了什么？

Answer 1

你的问题来自大小调整系统，而不是来自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);
}

另外，我知道你想要在悬停时显示伪元素。为此，我将透视原点设置在左侧;那样你就可以从头开始看

了

demo

顺便说一下，2个音符

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

2）如果您创建了一个代码小提琴，您将更容易让其他人帮助您。

当分配给单个元素时，Perspective适用于兄弟元素

1 个答案:

demo