4

我正在尝试使用 css3 旋转制作菜单。这是一个例子。

http://jsfiddle.net/5Bg7P/

当一个人悬停时，正方形会围绕 x 轴旋转 90 度，然后当用户单击它时，它会再旋转 5 度到 95 度。在 chrome 中，有时在它旋转后，我点击它，它会回到 0 度，就好像鼠标离开了项目一样，即使它没有。如果您让菜单项完成旋转然后仅单击它，则会更频繁地发生这种情况。

任何意见，将不胜感激。

#menu .menuItem {
  position: relative;
  float: left;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: translate3d(0, 0, -50px);
  transform: translate3d(0, 0, -50px);
  -webkit-transition: .5s;
  transition: .5s;
  width: 120px;
  height: 50px;
  opacity: .6;
  cursor: pointer;
}
#menu .menuItem:hover {
  -webkit-transform: rotateX(90deg);
  transform: rotateX(90deg);
  margin-top: 1px;
}
#menu .menuItem:active {
  -webkit-transform: rotateX(95deg);
  transform: rotateX(95deg);
  margin-top: 1px;
}
#menu .menuItem div {
  position: absolute;
  width: 120px;
  height: 50px;
  border: 1px solid #f2f2f2;
  background: #848488;
}
#menu .menuItem .front,
#menu .menuItem .bottom {
  text-align: center;
  height: 50px;
  line-height: 50px;
  color: #f2f2f2;
  letter-spacing: 1px;
  font-size: 18px;
}
#menu .menuItem .front {
  -webkit-transform: translate3d(0, 0, 25px);
  transform: translate3d(0, 0, 25px);
}
#menu .menuItem .back {
  -webkit-transform: translate3d(0, 0, -25px);
  transform: translate3d(0, 0, -25px);
  /* box-shadow: 0px 0px 40px 7px #b9c9d0; */
}
#menu .menuItem .top {
  -webkit-transform: rotateX(90deg) translate3d(0, 0, 25px);
  transform: rotateX(90deg) translate3d(0, 0, 25px);
}
#menu .menuItem .bottom {
  -webkit-transform: rotateX(-90deg) translate3d(0, 0, 25px);
  transform: rotateX(-90deg) translate3d(0, 0, 25px);
}
#menu .menuItem .right {
  -webkit-transform: rotateY(90deg) translate3d(0, 0, 50px);
  transform: rotateY(90deg) translate3d(0, 0, 50px);
  height: 50px;
  width: 50px;
  left: 25px;
}
#menu .menuItem .left {
  -webkit-transform: rotateY(-90deg) translate3d(0, 0, 50px);
  transform: rotateY(-90deg) translate3d(0, 0, 50px);
  height: 50px;
  width: 50px;
  left: 25px;
}
4

1 回答 1

2

我认为这是在基本元素或子元素中激活悬停状态的问题。

我稍微改变了悬停和转换的工作方式，现在可以正常工作（或者至少在我的测试中可以正常工作）

CSS

#menu {
  position: relative;
  z-index: 1;
  float: left;
    font-family: helvetica;
}
#menu .menuItem {
  position: relative;
  float: left;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: .5s;
  transition: .5s;
  width: 120px;
  height: 50px;
  opacity: .6;
  cursor: pointer;
}
#menu .menuItem:active {
  -webkit-transform: rotateX(5deg);
  transform: rotateX(5deg);
  margin-top: 1px;
}
#menu .menuItem div {
  position: absolute;
  width: 120px;
  height: 50px;
  border: 1px solid #f2f2f2;
  background: #848488;
  text-align: center;
  line-height: 50px;
  letter-spacing: 1px;
  font-size: 18px;
  margin-top: 1px;
  transition: .5s;
}
#menu .menuItem .front {
  -webkit-transform: translate3d(0, 0, 25px);
  transform: translate3d(0, 0, 25px);
}
#menu .menuItem .bottom {
  -webkit-transform: rotateX(-90deg) translate3d(0, 0, 25px);
  transform: rotateX(-90deg) translate3d(0, 0, 25px);
}
#menu .menuItem:hover .front {
  -webkit-transform: rotateX(90deg)  translate3d(0, 0, 25px);
  transform: rotateX(90deg)  translate3d(0, 0, 25px);
}
#menu .menuItem:hover .bottom {
  -webkit-transform: translate3d(0, 0, 25px);
  transform: translate3d(0, 0, 25px);
}

小提琴

更新的小提琴

之间的过渡

  transform: rotateX(90deg)  translate3d(0, 0, 25px);

和

  transform: translate3d(0, 0, 25px);

不是完美的旋转，而是两个动作之间的插值。

要获得纯旋转，其他状态必须具有匹配的属性：

  transform: rotateX(0deg)  translate3d(0, 0, 25px);
于 2013-11-11T17:44:21.330 回答