1

I like to translateY and rotate a h1 element to its place. but the translation doesn't work and while rotating the text leaves its place and gets back, but i want it to be in its place the whole time.

code:

.article1 h1{
    font-size: 50px;
    font-weight: 600;
    margin-top: 130px;
    margin-bottom: 12px; 
    animation: tilt 2s ease 3;
} 
@keyframes tilt{
  0% {
    transform: translateY(200px);
    transform: rotateY(0deg);
    opacity: 0.2;
  }
  100% {
    transform: translateY(0px);
    transform: rotateY(360deg);
    opacity: 1;
  }
}

I need the h1 to come to its location from 200px top, and do a 360deg Y rotation while coming down, is it possible?

Cuong Le Ngoc
  • 11,595
  • 2
  • 17
  • 39
athithyan
  • 19
  • 2

1 Answers1

1

Your rotateY transform is overwriting your translateY transform, you need to include both rotateY and translateY in the one transform line

Try this:

@keyframes tilt{
  0% {
    transform: translateY(200px) rotateY(0deg);
    opacity: 0.2;
  }
  100% {
    transform: translateY(0px) rotateY(360deg);
    opacity: 1;
  }
}
Joundill
  • 6,828
  • 12
  • 36
  • 50
  • thanks, both of them works now, but still when the elements rotates it moves to the right and gets back left, is there any way to make it rotate in a single place? – athithyan Apr 08 '20 at 02:48
  • I'm not sure if I understand what you're asking. Your CSS says the animation happens 3 times, perhaps `animation: tilt 2s ease 1;` would fix it? – Joundill Apr 08 '20 at 03:15