CSS 3D вертикальная анимация эффекта флип не выглядит правильно - PullRequest
Новая
       4

CSS 3D вертикальная анимация эффекта флип не выглядит правильно

0 голосов
/ 27 октября 2018

Я пытаюсь добиться этого стиля эффекта вертикального отражения 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

Я пытался объединить их в jsfiddle, но мне кажется, что анимация выглядит не совсем правильно.Хотя эффект codepen выглядит так, как будто он включает трехмерный блок, мое просто выглядит как два слова, поворачивающихся независимо друг от друга.https://jsfiddle.net/gibsonion/jskmp8v2/58/

...