Question

我正在尝试为我的菜单添加一个新的悬停效果，我在这里用HTML / CSS嘲笑它： https://codepen.io/anon/pen/dWOBNG

HTML

<ul>
 <li class="cube" >
  <a href="#">
   <span class="flippety">
    flip
   </span>
   <span class="flop">
    flop
   </span>
  </a>
 </li>
</ul>

CSS

   /* Set-up */
body {
color: rgb(6, 106, 117);
text-transform: uppercase;
font-family: sans-serif;
font-size: 100%;
background: #e3e3e3;
padding: 3em 0 0 0;
line-height: 60px;
-webkit-perspective: 1000px; /* <-NB */
}

/* Container box to set the sides relative to */
.cube {
width: 30%;
text-align: center;
margin: 0 auto;
height: 60px;
display: block;
-webkit-transition: -webkit-transform .75s;
transition: transform .75s; /* Animate the transform properties */
background-color: red;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d; /* <-NB */
}

/* The two faces of the cube */
.flippety,.flop {
border: 1px solid rgba(147, 184, 189, .8);
display: block;
}

/* Position the faces */
.flippety {
-webkit-transform: translateZ(30px);
transform: translateZ(30px);
background-color: green;
}

.flop {
-webkit-transform: rotateX(-90deg)   translateZ(-30px);
transform: rotateX(-90deg) translateZ(-30px);
background-color: yellow;
}

/* Rotate the cube */
.cube:hover {
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg); /* Text bleed at 90º */
}

问题是，在我实际悬停在元素本身之前，它正在转变，如下所示： .gif of the problem

我正在努力找出原因......

我认为这可能与想要“堆叠”在一起的2个跨度标签有关，但我看不到另一种方式。

任何帮助都将不胜感激。

由于

Answer 1

我将多维数据集类更改为标记。

我的坏，这完全解决了它。

Answer 2

body {
  color: rgb(6, 106, 117);
  text-transform: uppercase;
  font-family: sans-serif;
  font-size: 100%;
  background: #e3e3e3;
  padding: 3em 0 0 0;
  line-height: 60px;
  -webkit-perspective: 1000px;
}
.cube {
  width: 30%;
  text-align: center;
  margin: 0 auto;
  height: 60px;
  display: block;
  -webkit-transition: -webkit-transform .75s;
  transition: transform .75s;
  background-color: red;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d; /* <-NB */
}
.cube a {
  display: block;
  text-decoration: none;
  height: 60px;
}

.flippety,.flop {
  display: block;
  color: #FFF;
}
.flippety {
  -webkit-transform: translateZ(30px);
  transform: translateZ(30px);
  background-color: green;
}
.flop {
  -webkit-transform: rotateX(-90deg)   translateZ(-30px);
  transform: rotateX(-90deg) translateZ(-30px);
  background-color: yellow;
  color: #000;
}
.cube:hover {
  -webkit-transform: rotateX(90deg);
  transform: rotateX(90deg);
}

<ul>
 <li class="cube" >
  <a href="#">
   <span class="flippety">
    flip
   </span>
   <span class="flop">
    flop
   </span>
  </a>
 </li>
</ul>

元素在悬停之前转换（translateZ）

2 个答案: