JSFiddle - React, Tailwind, and code Playground

by Nechifor Vasile

HTML

<br>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 157.144 210.706" width="400" height="80">
<g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1" transform="translate(278.68394,-43.393569)">
        <g id="g7694-4-0" transform="matrix(9.7551121,0,0,9.7551121,-238.60944,118.65003)"
          style="display:inline;fill:#210070;fill-opacity:1" inkscape:export-xdpi="95.652267"
          inkscape:export-ydpi="95.652267">
          <path
            style="fill:#ffffff;fill-opacity:1;stroke-width:3.77952774;stroke:#7ad9c4;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none;paint-order:stroke markers fill"
            d="M 262.86523 0 C 259.20707 0 255.54906 0.9747576 252.13477 2.9257812 L 11.183594 163.88672 C -0.52254077 171.69081 -3.4486222 186.32316 4.3554688 198.0293 C 6.3065035 199.98033 9.2325701 199.97944 11.183594 199.00391 L 262.86523 31.216797 L 514.54883 199.00391 C 516.49997 199.97941 519.42596 199.98029 521.37695 198.0293 C 528.20556 186.32316 525.27946 170.7153 514.54883 163.88672 L 273.5957 2.9257812 C 270.18141 0.9747576 266.5234 0 262.86523 0 z M 62.886719 213.63672 C 52.156094 213.63672 43.376953 222.41586 43.376953 233.14648 L 43.376953 364.8418 C 43.376953 426.299 93.127829 477.02539 155.56055 477.02539 L 462.8457 477.02539 C 463.91374 477.02539 464.95587 476.91527 465.97852 476.74805 L 2260.875 476.74805 L 2260.875 446.89648 L 482.35547 446.89648 L 482.35547 233.14648 C 482.35547 222.41586 473.57634 213.63672 462.8457 213.63672 L 62.886719 213.63672 z M 72.640625 242.90234 L 453.08984 242.90234 L 453.08984 447.75977 L 155.56055 447.75977 C 109.71152 447.75977 72.640625 410.69084 72.640625 364.8418 L 72.640625 242.90234 z "
            transform="matrix(0.02712253,0,0,0.02712253,-4.1080512,-7.7145665)" id="path7692-5-8" />
        </g>
        <g class="cube realthie"
          aria-label="Real"
         ...

CSS

.cube {
	-webkit-transform-style: preserve-3d;
	-webkit-animation: rotate-cube 10s linear infinite;
}

.realthie {
	
  	/* -webkit-transform: rotateY(0deg) translateZ(-100px) rotateX(180deg) rotateZ(180deg); */
}



.acasa {
	-webkit-transform: rotateX(90deg) translateZ(-50px) rotateY(180deg) rotateZ(180deg);
  visible:0;
}

@-webkit-keyframes rotate-cube {
	0%{-webkit-transform: rotateY(0deg);}
49%{-webkit-transform: rotateY(180deg);}
    50%{-webkit-transform: rotateY(180deg);}
  74%{-webkit-transform: rotateY(180deg);}
    75%{-webkit-transform: rotateY(270deg);}
  99%{-webkit-transform: rotateY(0deg);}
	
  100%{-webkit-transform: rotateY(180deg);}
}