I've been searching for a solution without much luck. I must admit, my CSS skills are pretty basic.

Currently, I am using Muxy.io to manage notifications for my livestreams. The platform allows customization of notifications through HTML and CSS files.

You can check out how it currently looks here: Notification preview

What I am trying to achieve is to have the notification display at random angles.

This is my current HTML code:

<div id="notificationHolder">
  <div id="followNotification">
    <div id="line">
      <span id="name">{name}</span>
      <span id="tagline">Has Just Followed!</span>
    </div>
  </div>

  <div class="tts" style="display: none;">
    {tts_user_message}
  </div>
  <script>
    $( document ).ready(function() {
        var audio = [ArrayOfSoundURLs];
        var rand = Math.floor(Math.random() * audio.length);
        audio[rand].play();
    });
  </script>
</div>

And this is my current CSS code (I did not write this):

#line {
  background: rgba(37, 48, 74, .8)
}
#name {
  color: rgb(255, 179, 61)
}
#tagline {
  color: rgb(240, 242, 245)
}


html, body {
  margin: 0;
  padding: 0;
  font-family: 'Forced Square', sans-serif;
  font-style: italic;
}  

#notificationHolder {
  position: relative;
  overflow: hidden;
  width: 1920px;
  height: 1080px;
  top: 0;
  left: 0;
}

#line {
  width: 0;
  height: 0;
  position: absolute;
  top: 400px;
  left: 50%;
  margin-left: 0;
  -webkit-transform: rotate(-5deg);
          transform: rotate(-5deg);
  opacity: 0;
  -webkit-animation: lineIn 0.2s .6s forwards, 
             lineGrow 0.4s 1s forwards,
             linehide 0.5s 6.7s forwards;
          animation: lineIn 0.2s .6s forwards, 
             lineGrow 0.4s 1s forwards,
             linehide 0.5s 6.7s forwards; 
}

@-webkit-keyframes lineIn {
  0% {width: 0; height: 0px;}
  100% {width: 2200px; margin-left: -1100px; opacity: 1; height: 3px;}
}

@keyframes lineIn {
  0% {width: 0; height: 0px;}
  100% {width: 2200px; margin-left: -1100px; opacity: 1; height: 3px;}
}

@-webkit-keyframes lineGrow {
  0% {}
  100% {height: 200px; top: 300px;}
}

@keyframes lineGrow {
  0% {}
  100% {height: 200px; top: 300px;}
}

@-webkit-keyframes linehide {
  0% {height: 200px;top: 300px;}
  100% {height: 0px; top: 400px;}
}

@keyframes linehide {
  0% {height: 200px;top: 300px;}
  100% {height: 0px; top: 400px;}
}


#name {
  text-align: center;
  font-size: 120px;
  width: 2200px;
  display: block;
  line-height: 120px;
  text-indent: -3000px;
  position: absolute;
  top: 30px;
  white-space: nowrap;
  opacity: 0;
  -webkit-animation: textIn 0.4s 1.4s forwards,
             textTravel 4.6s 1.8s linear forwards;
          animation: textIn 0.4s 1.4s forwards,
             textTravel 4.6s 1.8s linear forwards;
}

@-webkit-keyframes textIn {
  0% {text-indent: -3000px;opacity: 1;}
  100% {text-indent: -20px;opacity: 1;} 
}

@keyframes textIn {
  0% {text-indent: -3000px;opacity: 1;}
  100% {text-indent: -20px;opacity: 1;} 
}

@-webkit-keyframes textTravel {
  0% {text-indent: -20px;}
  90% {text-indent: 20px;}
  95% {text-indent: 3000px;} 
  100% {text-indent: 3000px;} 
}

@keyframes textTravel {
  0% {text-indent: -20px;}
  90% {text-indent: 20px;}
  95% {text-indent: 3000px;} 
  100% {text-indent: 3000px;} 
}

#tagline {
  text-align: center;
  font-size: 50px;
  width: 2200px;
  display: block;
  line-height: 50px;
  text-indent: 3000px;
  position: absolute;
  bottom: 30px;
  white-space: nowrap;
  opacity: 0;
  -webkit-animation: tagIn 0.4s 1.4s forwards,
             tagTravel 4.6s 1.8s linear forwards;
          animation: tagIn 0.4s 1.4s forwards,
             tagTravel 4.6s 1.8s linear forwards;
}

@-webkit-keyframes tagIn {
  0% {text-indent: 3000px;opacity: 1;} 
  100% {text-indent: 20px;opacity: 1;} 
}

@keyframes tagIn {
  0% {text-indent: 3000px;opacity: 1;} 
  100% {text-indent: 20px;opacity: 1;} 
}

@-webkit-keyframes tagTravel {
  0% {text-indent: 20px;}
  90% {text-indent: -20px;}
  95% {text-indent: -3000px;} 
  100% {text-indent: -3000px;} 
}

@keyframes tagTravel {
  0% {text-indent: 20px;}
  90% {text-indent: -20px;}
  95% {text-indent: -3000px;} 
  100% {text-indent: -3000px;} 
}

If you want to change the angle of the notification, you need to modify the "transform: rotate(deg)" parts of the CSS code snippet given above. Since CSS cannot generate random numbers, this task needs to be done in the HTML file and then transferred to the CSS file.

#line {
      width: 0;
      height: 0;
      position: absolute;
      top: 400px;
      left: 50%;
      margin-left: 0;
      -webkit-transform: rotate(-5deg);
              transform: rotate(-5deg);
      opacity: 0;
      -webkit-animation: lineIn 0.2s .6s forwards, 
                 lineGrow 0.4s 1s forwards,
                 linehide 0.5s 6.7s forwards;
              animation: lineIn 0.2s .6s forwards, 
                 lineGrow 0.4s 1s forwards,
                 linehide 0.5s 6.7s forwards; 
    }

Given the constraints of Muxy.io, how would you recommend approaching this issue?

I hope this isn't too specific. I wanted to provide all necessary information. Typically, I try to figure things out on my own, but I'm stuck at the moment. Any help or insight you can offer is greatly appreciated.