change text with css (less) animation rotate (Y) possible?

Question

I'm stuck here. Anyone knows where's the mistake in below code? Tried searching and tried all kinds of codes, I could think of. For some reason, the text does not alter but only shows "Original Text" and even without rotating (but with appearance change). I would like to rotate (Y) and while doing so, change appearance and text. Any help appreciated, thanks.

.test:before {
content: "Original Text";
font-size: 250%;
font-weight: bold;
padding-top: 25px;
color: #ffffff;
-webkit-animation: anim 4s infinite alternate ease-in-out;
animation: anim 4s infinite alternate ease-in-out;
}
@-webkit-keyframes anim {
from {text-shadow: 2.5px 2.5px 2.5px #333333; -webkit-transform: rotateY(0deg); transform: rotateY(0deg);}
to {-webkit-text-stroke: 0.5px #800000; -webkit-transform: rotateY(180deg); transform: rotateY(180deg);}
}
@keyframes anim {
from {text-shadow: 2.5px 2.5px 2.5px #333333; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); content: "Original Text";}
to {-webkit-text-stroke: 0.5px #800000; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); content: "Changed Text";}
}

Welcome to SO. Please take a [tour](https://stackoverflow.com/tour) of the [help centre](http://stackoverflow.com/help) to see [how to ask a good question](http://stackoverflow.com/help/how-to-ask). We cannot help you if you do not provide enough code to replicate - see how to create a [MCVE] — Pete, Mar 07 '19 at 13:16

score 0 · Accepted Answer · answered Mar 07 '19 at 13:30

The pseudo-element needs to have display:inline-block for the transform to take place.

.test:before {
  display: inline-block;
  content: "Original Text";
  font-size: 250%;
  font-weight: bold;
  padding-top: 25px;
  color: #ffffff;
  -webkit-animation: anim 4s infinite alternate ease-in-out;
  animation: anim 4s infinite alternate ease-in-out;
}

@-webkit-keyframes anim {
  from {
    text-shadow: 2.5px 2.5px 2.5px #333333;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  to {
    -webkit-text-stroke: 0.5px #800000;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
}

@keyframes anim {
  from {
    text-shadow: 2.5px 2.5px 2.5px #333333;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    content: "Original Text";
  }
  to {
    -webkit-text-stroke: 0.5px #800000;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    content: "Changed Text";
  }
}

<div class="test"></div>

Thanks very much Paulie_D - that did the trick! Cheers – saranjaikrap Mar 07 '19 at 15:20 — saranjaikrap, Mar 07 '19 at 15:20

change text with css (less) animation rotate (Y) possible?

1 Answers1