懸停在水平軸上翻轉文本 - jQuery或css

Question

客戶端要求在其網站的菜單項上有翻轉效果 - 在懸停時，項目應該在水平軸上翻轉，然後返回到他們的原始位置。與此處的第二個示例類似：http://daynin.github.io/wodry/#examples，但僅限於懸停。

谷歌搜索到目前爲止還沒有發現任何答案，但我不知道要搜索什麼......有沒有人對跨瀏覽器，輕量級解決方案有什麼建議？

在此先感謝。

Answer 1

css transform: translate3d(x, y, z)是您應該開始查看以及css動畫的地方。

Answer 2

對於這種類型的效果，我通常使用transform: scaleY(-1);來翻轉元素。您也可以使用scaleX()作爲對面軸。較大的值將縮放內容，因此如果您需要1：1縮放比例，請使用-1。可以說你使用-2，它仍然會翻轉內容，但是它會是軸的兩倍。

Codepen example

<!-- html --> 
<div class="wrapper"> 
    <h1> Some Text </h1> 
</div> 

/* CSS */ 
.wrapper{ 
    width: 250px; 
    background: #09c; 
    padding:1em; 
} 
h1{ 
    margin: 0 auto; 
    padding:0; 
    text-align:center; 
    transition: all 0.4s ease; 
} 
.wrapper:hover h1{ 
    transition: all 0.4s ease; 
    transform: scaleY(-1); 
} 

編輯：更新快翻轉只是文本整個元素代替。