Question

客户要求对其网站的菜单项进行翻转效果 - 在悬停时，项目应在水平轴上翻转，然后返回原始位置。与此处的第二个示例类似：http://daynin.github.io/wodry/#examples，但仅限于悬停。

到目前为止，谷歌搜索还没有找到任何答案，但我不确定要搜索什么...有没有人有跨浏览器，轻量级解决方案的建议？

提前致谢。

Answer 1

对于这种类型的效果，我通常使用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);
}

编辑：快速更新以翻转文本而不是整个元素。

Answer 2

{c} transform: translate3d(x, y, z)是你应该开始寻找css动画的地方。

在悬停时将文本翻转在水平轴上 - jquery或css

2 个答案: