I'm trying to rotate my shadow only, but I rotate my object with it. How do I only rotate the shadow

    text-shadow: 20px 20px 1px red;
    transform: rotate(180deg);
}

CodePudding user response：

You can't rotate text-shadow directly but you can use below method to get your expected result.

Using this method now you can also apply other CSS to your text shadow text. For that you have to get same content text in title also.

.text-rotate {
  position: relative;
  line-height: initial;
  font-size: 30px;
}

.text-rotate:after {
  content: attr(title);
  text-shadow: 0px 0px 1px red;
  position: absolute;
  transform: rotate(180deg);
  color: transparent;
  top: 100%;
  left: 0px;
  
}

<div title="Test Text" class="text-rotate">Test Text</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You don't. You'd need a separate object and overlay the text. See answer How can I overlay a text over another using CSS?