website/random/3dtest/effect.css

body {
    width: 100vw;
    height: 100vh;
}

#clickMe {
    position: absolute;
    width: 200px;
    height: 200px;
    font-size: 40px;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    border-radius: 0;
    border: 10px solid #FF00FF;
    transform: translateZ(100px);
}

.scene {
    width: 200px;
    height: 200px;
    perspective: 600px;

    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;

    display: none;
}

#cube > div {
    position: absolute;
    height: 200px;
    width: 200px;
}

#cube0 { transform: rotateY(  0deg) translateZ(100px); }
#cube1 { transform: rotateY( 90deg) translateZ(100px); }
#cube2 { transform: rotateY(180deg) translateZ(100px); }
#cube3 { transform: rotateY(-90deg) translateZ(100px); }
#cube4 { transform: rotateX( 90deg) translateZ(100px); }
#cube5 { transform: rotateX(-90deg) translateZ(100px); }

.face-image {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 10px solid #FF00FF;
    opacity: 0.5;
}

@keyframes rotate3d {
    0% {
        transform:
            rotateY(0deg)
            rotateX(0deg)
            rotateZ(0deg);
    }
    25% {
        transform:
            rotateY(90deg)
            rotateX(360deg)
            rotateZ(90deg);
    }
    50% {
        transform:
            rotateY(180deg)
            rotateX(720deg)
            rotateZ(180deg);
    }
    75% {
        transform:
            rotateY(270deg)
            rotateX(1080deg)
            rotateZ(270deg);
    }
    100% {
        transform:
            rotateY(360deg)
            rotateX(1440deg)
            rotateZ(360deg);
    }
}

@keyframes scale {
    0% {
        scale: 1 1.4 1;
    }
    50% {
        scale: 1.4 1 1.4;
    }
    100% {
        scale: 1 1.4 1;
    }
}