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); }
}

我也做了一个小问题：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>

投币机效果涉及以下内容：

为元素赋予深度，以便当它面向后方（远离你）时，它会远离屏幕/查看器
使用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来这样做，因为它有没有语义含义（想象一下搜索引擎阅读两个“Home”链接）。相反，您可以使用伪元素（更改徽标标题时需要更新）或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%);
}

试图找出CSS动画

2 个答案:

更简单的解决方案