<!– wp:spacefish/livecodes {"template":"html","markup":{"language":"html","content":"\n\n\n \n \n
Rotating Cube\n \n body {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n margin: 0;\n background-color: #000;\n }\n #cube {\n width: 100px;\n height: 100px;\n position: relative;\n transform-style: preserve-3d;\n animation: rotate 5s infinite linear;\n }\n .face {\n position: absolute;\n width: 100px;\n height: 100px;\n background-color: rgba(255, 255, 255, 0.8);\n border: 2px solid #fff;\n }\n .front { transform: translateZ(50px); }\n .back { transform: rotateY(180deg) translateZ(50px); }\n .right { transform: rotateY(90deg) translateZ(50px); }\n .left { transform: rotateY(-90deg) translateZ(50px); }\n .top { transform: rotateX(90deg) translateZ(50px); }\n .bottom { transform: rotateX(-90deg) translateZ(50px); }\n\n @keyframes rotate {\n from { transform: rotateX(0) rotateY(0); }\n to { transform: rotateX(360deg) rotateY(360deg); }\n }\n \n\n\n
\n\n”},”style”:{“language”:”css”,”content”:””},”script”:{“language”:”javascript”,”content”:””}} /–>