翻转已旋转的文本

Question

我可以使用一些帮助将文本旋转90度后水平翻转。 Here is a code pen showing what I'm doing。基本上，我试图翻转几个海藻片，使它们面向不同的方向，看起来更自然。我尝试过使用transform：scaleX（-1）但是没有用。我认为这是因为我已经将角色（“〜”）旋转了90度，但我并不积极。

.seaweed {
  font-size:20em;
  color:green;
  transform:rotate(90deg);
  width:100px;
  position:fixed;
  bottom:-100px;
  margin:0;
  animation: float 3s infinite;
}

#seaweed1 {
  left:5%;
}

#seaweed2 {
  left:12%;
  animation-delay:1s;
}

#seaweed3 {
  left:50%;
}

#seaweed4 {
  left:54%;
  animation-delay:0.5s;
}

#seaweed5 {
  left:65%;
}

#seaweed6 {
  left:75%;
  animation-delay:0.7s;
}

@keyframes float {
  0% {
    transform: translateY(-10px) translateX(0) rotate(90deg);
  }
  50% {
    transform: translateY(40px) translateX(0) rotate(90deg);
  }

  100% {
    transform: translateY(-10px) translateX(0) rotate(90deg);
  }
}

有什么想法吗？