Element verwandelt, bevor Hover (translateZ)

Question

Ich versuche, einen neuen Hover-Effekt auf mein Menü hinzufügen, ich spöttisch es hier in HTML/CSS up: 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º */ 
} 

Das Problem ist, dass es die Umwandlung ist, bevor ich tatsächlich über die sich Element schweben, wie Sie hier sehen können: .gif of the problem

Ich bin zu kämpfen, genau zu arbeiten, warum ...

Ich denke, es kann etwas mit den 2 span-Tags zu wollen „Stapel“ auf dem jeweils anderen zu tun, aber ich kann nicht sehen, ein anderer Weg um dies.

Jede Hilfe wäre willkommen.

Danke

Answer 1

Ich änderte die Cube-Klasse zum Tag.

Mein schlechtes, das hat es perfekt gelöst.

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>