試圖找出CSS動畫

Question

我一直試圖在CSS中為標題元素設置動畫，以便在懸停時將文本向前旋轉。 我已經閱讀了大量的教程，並設法讓它順時針（或逆時針）旋轉，但不是我想要的（向前，就像它向我旋轉）。

當您懸停導航鏈接時， http://disruptltd.com/會顯示我所效果的一個很好的例子。

如果有人能告訴我是否可以使用CSS或任何有關如何實現這種效果的信息，我會非常感激

這是我到目前為止最接近的，使用此代碼：

.navigation h1:hover {
  display: inline-block;
  -moz-animation: spin-reverse 2s infinite linear;
  -o-animation: spin-reverse 2s infinite linear;
  -webkit-animation: spin-reverse 2s infinite linear;
  animation: spin-reverse 2s infinite linear;
}

@-moz-keyframes spin-reverse {
  0% { -moz-transform: rotate(0deg); }
  100% { -moz-transform: rotate(-359deg); }
}
@-webkit-keyframes spin-reverse {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(-359deg); }
}
@-o-keyframes spin-reverse {
  0% { -o-transform: rotate(0deg); }
  100% { -o-transform: rotate(-359deg); }
}
@-ms-keyframes spin-reverse {
  0% { -ms-transform: rotate(0deg); }
  100% { -ms-transform: rotate(-359deg); }
}
@keyframes spin-reverse {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-359deg); }
} 

我也做了一個jfiddle： http ： //jsfiddle.net/qzxbd5fz/

所以基本上我希望效果看起來像是旋轉着我，類似於老虎機，而不是這種時鍾旋轉式的效果。

提前致謝

Answer 1

試試這個 http://jsfiddle.net/qzxbd5fz/1/

這就是我添加的內容

h1{
    -webkit-transition:font-size 3s ;
}
h1:hover {
    display: inline-block;
    font-size:50px;
}

Answer 2

這是一個相當簡單的例子，我稍微修改了你的標記。 由於老虎機旋轉效果需要深度，這意味着我們需要某種包裝，以便我們可以向父元素聲明perspective值：

<h1><span>SITE LOGO</span></h1>

老虎機效果涉及以下內容：

1. 賦予元素深度，以便當它面向后方（遠離你）時，它遠離屏幕/查看器
2. 使用scale來調整元素的大小，因為我們要在Z軸上轉換元素以給出深度效果

代碼如下，這里可以看到一個示例小提琴： http ： //jsfiddle.net/teddyrised/qzxbd5fz/2/ 。 為了更好地演示我選擇使用CSS轉換的效果，但您始終可以將其轉換回動畫。

h1 {
    background: #eee;
    padding: 30px;
    perspective: 100px;
}
h1 span {
    display: block;
    text-align: center;
    transition: all 1s ease-in-out;
    -webkit-transform: rotateX(0) translateZ(50px) scale(0.5);
}
h1:hover span {
    -webkit-transform: rotateX(-360deg) translateZ(50px) scale(0.5);
}

更重要的是，您可以使用backface-visibility: hidden在<span>元素上，以防止文本在沿X軸旋轉-180deg時顯示。

---

更簡單的解決方案

在看到OP澄清了他想要看到什么樣的效果之后，也許使用偽元素的簡單翻譯技巧就可以了。

問題是，為了獲得鏈接的示例頁面上提到的效果，您需要以某種方式復制站點徽標文本 - 我不建議使用HTML這樣做，因為它沒有語義含義（想象一下搜索引擎閱讀兩個“主頁”鏈接）。 相反，您可以使用偽元素（更改徽標標題時需要更新）或JS復制文本。 在這里，我決定使用偽元素進行純CSS方法。

在這里查看演示： http ： //jsfiddle.net/teddyrised/qzxbd5fz/3/

再次，使用以下標記：

<h1><span>SITE LOGO</span></h1>

對於你的CSS：

h1 {
    background: #000;
    font-family: Arial;
    overflow: hidden;
}
h1 span {
    color: #fff;
    transition: all .25s ease-in-out;
}
h1 span, h1 span::after {
    display: inline-block;
    position: relative;
}
h1 span::after {
    content: 'SITE LOGO';
    color: #1ddfb3;
    -webkit-transform: translate3D(-100%, 100%, 0);
}
h1:hover span {
    -webkit-transform: translateY(-100%);
}