MFPLayer Cubo

* { margin: 0; padding: 0; box-sizing: border-box; } .cube-face.front {transform: rotateY( 0deg) translateZ(150px);background: pink;} .cube-face.back { transform: rotateY(180deg) translateZ(150px); background: #000; } .cube-face.left {transform: rotateY(-272deg) translateZ(250px);background: hotpink !important;padding: 5px;border-radius: 30px !important;width: 700px;z-index: 99;} .cube-face.right { transform: rotateY( 90deg) translateZ(150px); background: #000; } .cube-face.top { transform: rotateX( 90deg) translateZ(150px); background: #000; } .cube-face.bottom { transform: rotateX(-90deg) translateZ(150px); background: #000; } .cubod { display: flex; justify-content: center; align-items: center; height: 1000px; font-family: 'Arial', sans-serif; overflow: hidden; margin: auto; position: relative; marint-op: -470px; width: 100vw; border-radius: 0; right: 0px; scale: 0.7; border: 0; z-index: 200; left: auto; position: relative; top: -180px; background: #000; border: 10px dashed; border-radius: 110px; } .cube-containerx { perspective: 1700px; width: 600px; height: 400px; } .cube { width: 300PX; height: 300PX; transform-style: preserve-3d; transition: transform 0.2s ease-in-out; /* Smooth transition */ cursor: pointer; position: relative; /* Default rotation animation */ animation: rotateCube 15s infinite linear; } .cube-face { position: absolute; width: 100%; height: 100%; background-color: #000; border: 11px dashed hotpink; display: flex; justify-content: center; align-items: center; font-size: 50px !important; color: white; font-weight: bold; border-radius: 10px; } .front {transform: rotateY( 0deg) translateZ(150px);background: pink;} .back { transform: rotateY(180deg) translateZ(150px); background: #000; } .left {transform: rotateY(-272deg) translateZ(250px);background: hotpink !important;padding: 5px;border-radius: 30px !important;width: 700px;z-index: 99;} .right { transform: rotateY( 90deg) translateZ(150px); background: #000; } .top { transform: rotateX( 90deg) translateZ(150px); background: #000; } .bottom { transform: rotateX(-90deg) translateZ(150px); background: #000; } /* Profile picture and name */ .profile-containexr { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } .profile-pic { width: 250px; height:250px; border-radius: 50%; object-fit: cover; position:relative; top: 38px; border: 11px dashed white; border-radius: 20p; } .profile-name { margin-top: 10px; font-size: 14px; color: white; font-weight: normal; } @keyframes rotateCube { 0% { transform: rotateX(0deg) rotateY(0deg); } 25% { transform: rotateX(45deg) rotateY(45deg); } 50% { transform: rotateX(80deg) rotateY(90deg); } 75% { transform: rotateX(-70deg) rotateY(130deg); } 100% { transform: rotateX(60deg) rotateY(260deg); } } .cube:hover { transform: rotateY(0deg) rotateX(0deg)!important; } .cube-face.front{ transform: rotateY(0deg) rotateX(0deg)!important; } .cube-face.back{ transform: rotateY(0deg) rotateX(0deg)!important; } .cube-face.left{ transform: rotateY(0deg) rotateX(0deg)!important; } .cube-face.right .cube-face.top { transform: rotateY(0deg) rotateX(0deg)!important; } .cube-face.bottom { transform: rotateY(0deg) rotateX(0deg)!important; }