元素的懸停之前，把（translateZ）

我想一個新的懸停效果添加到我的菜單中，我嘲諷它在HTML/CSS的位置： https://codepen.io/anon/pen/dWOBNG 元素的懸停之前，把（translateZ）

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個span標籤希望在彼此的頂部「堆」，但我看不到換個角度來看這個。

任何幫助，將不勝感激。

謝謝

來源

2017-04-26 Ste Hughes

我將立方體類更改爲標記。

我的不好，這解決了它完美。

來源

2017-04-26 14:53:12

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>

來源

2017-04-26 14:53:22

元素的懸停之前，把（translateZ）

回答

相關問題