css3 – CSS转换悬停在chrome中不一致

2019年7月21日 199次阅读

我正在尝试用
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;
}

最佳答案 我认为这是关于在基本元素或子元素中激活悬停状态的问题.

我稍微改变了悬停和变换的工作原理,现在它工作正常(或者至少它在我的测试中工作正常)

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

fiddle

updated fiddle

两者之间的转换

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

和

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

不是完美的旋转,而是2个动作之间的插值.

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

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