Question

我正在尝试实现这种垂直翻转效果https://codepen.io/kanishkkunal/pen/wgEBgX

上面链接中的

SCSS转换为CSS：

a:hover, a:focus {
  color: #222;
}
a.flip-animate {
  perspective: 1000px;
}
a.flip-animate span {
  position: relative;
  display: inline-block;
  padding: 0;
  transition: transform 0.3s;
  transform-origin: 50% 0;
  transform-style: preserve-3d;
}
a.flip-animate span:before {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  content: attr(data-hover);
  transition: color 0.3s;
  transform: rotateX(-90deg);
  transform-origin: 50% 0;
  text-align: center;
}
a.flip-animate:hover span, a.flip-animate:focus span {
  transform: rotateX(90deg) translateY(-22px);
}
a.flip-animate:hover span:before, a.flip-animate:focus span:before {
  color: #d24936;
}

但是像这样的翻转效果https://davidwalsh.name/css-flip

中使用了两个div

我一直试图将它们组合到一个jsfiddle中，但是我似乎无法使动画看起来非常正确。虽然Codepen效果看起来像是在打开3D块，但是我的看起来就像两个词独立地转向。 https://jsfiddle.net/gibsonion/jskmp8v2/58/

CSS 3D垂直翻转效果动画看起来不正确

0 个答案: