css animate transform xyz with mad matrix

by gaby de wilde

HTML

<div class="foo">
<div id="foo1">
  S
</div>
<div id="foo2">
  A
</div>
<div id="foo3">
  L
</div>
<div id="foo4">
  A
</div>
<div id="foo5">
  M
</div>
<div id="foo6">
  I
</div>
<div id="foo7">
  S
</div>
<div id="foo8">
  U
</div>
<div id="foo9">
  S
</div>
<div id="foo10">
  H
</div>
<div id="foo11">
  I
</div>
</div>

CSS

body{
  background:black;
  color:white; 
  animation: backgr 20s infinite linear;
  background-size: 50px 50px;
  background-image: linear-gradient(to right, red 0.1px, transparent 1px), linear-gradient(to bottom, red 0.1px, transparent 1px);
  margin-top: 0px;
  }
  
  .foo{
    animation: backgr 40s infinite linear;
  background-size: 50px 50px;
  background-image: linear-gradient(to right, green 0.1px, transparent 1px), linear-gradient(to bottom, green 0.1px, transparent 1px);
    height: 100vmax;
  }
.foo div{
  width:100px;
  height:100px;
  animation: foox 10s infinite linear;position:absolute;
  font-size:44px;
}
#foo1{top:20px;left:20px}
#foo2{top:20px;left:46px}
#foo3{top:20px;left:78px}
#foo4{top:20px;left:104px}
#foo5{top:20px;left:132px}
#foo6{top:20px;left:174px}
#foo7{top:20px;left:190px}
#foo8{top:20px;left:214px}
#foo9{top:20px;left:242px}
#foo10{top:20px;left:264px}
#foo11{top:20px;left:295px}
#foo11 {  animation-delay:0s; }
#foo10 {  animation-delay:-0.1s; }
#foo9 {  animation-delay:-0.2s; }
#foo8 {  animation-delay:-0.3s; }
#foo7 {  animation-delay:-0.4s; }
#foo6 {  animation-delay:-0.5s; }
#foo5 {  animation-delay:-0.6s; }
#foo4 {  animation-delay:-0.7s; }
#foo3 {  animation-delay:-0.8s; }
#foo2 {  animation-delay:-0.9s; }
#foo1 {  animation-delay:-1s; }

@keyframes foox{
  0%{ transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);color:red}
  10%{transform: rotateX(180deg) rotateY(90deg) rotateZ(360deg);color:orange}
  20%{ transform: rotateX(360deg) rotateY(180deg) rotateZ(360deg);color:red}
  30%{ transform: rotateX(540deg); rotateY(270deg) rotateZ(360deg);color:red}
  40%{ transform: rotateX(720deg) rotateY(360deg) rotateZ(0deg);color:red}
  50%{text-shadow:none;}
  60%{color:white;text-shadow: 0 0 10px rgba(255,255,255,1) , 0 0 20px rgba(255,255,255,1) , 0 0 30px rgba(255,255,255,1) , 0 0 40px #ff00de , 0 0 70px #ff00de , 0 0 80px #ff00de , 0 0 100px #ff00de ;}
  75%{color:white;text-shadow:none}
    80%{ transform: rotateX(720deg)...