css 3D

Cube with transparent faces

1

2

4

5

<style>
#box1 {
    -webkit-perspective: 800px;
    -webkit-perspective-origin: 50% 150px;
}

#cube {
    position: relative;
    margin: 80px auto;
    height: 300px;
    width: 300px;
    -webkit-transition: -webkit-transform 2s linear;
    -webkit-transform-style: preserve-3d;
    animation-name: spin3D;
    animation-duration: 8s;
    animation-iteration-count: infinite;
}

@keyframes spin3D {
    0% {
        -webkit-transform: rotateX(0deg) rotateY(0deg);
        -moz-transform: rotateX(0deg) rotateY(0deg);
    }

    15% {
        -webkit-transform: rotateX(0deg) rotateY(-90deg);
        -moz-transform: rotateX(0deg) rotateY(-90deg);
    }

    30% {
        -webkit-transform: rotateX(0deg) rotateY(-180deg);
        -moz-transform: rotateX(0deg) rotateY(-180deg);
    }

    45% {
        -webkit-transform: rotateX(0deg) rotateY(-270deg);
        -moz-transform: rotateX(0deg) rotateY(-270deg);
    }

    65% {
        -webkit-transform: rotateX(-90deg) rotateY(0deg);
        -moz-transform: rotateX(-90deg) rotateY(0deg);
    }

    85% {
        -webkit-transform: rotateX(90deg) rotateY(0deg);
        -moz-transform: rotateX(90deg) rotateY(0deg);
    }

    100% {
        -webkit-transform: rotateX(0deg) rotateY(0deg);
        -moz-transform: rotateX(0deg) rotateY(0deg);
    }
}

#cube > div {
    position: absolute;
    font-size: 150px;
    text-align: center;
    height: 300px;
    width: 300px;
}

    #cube > div:nth-child(n) {
        height: 100%;
        width: 100%;
    }

    #cube > div:first-child {
        -webkit-transform: translateZ(150px);
        -moz-transform: translateZ(150px);
        background-color: rgba(0, 255, 0, 0.7);
    }

    #cube > div:nth-child(2) {
        -webkit-transform: rotateY(90deg) translateZ(150px);
        -moz-transform: rotateY(90deg) translateZ(150px);
        background-color: rgba(0, 0, 0, 0.7);
    }

    #cube > div:nth-child(3) {
        -webkit-transform: rotateY(180deg) translateZ(150px);
        -moz-transform: rotateY(180deg) translateZ(150px);
        background-color: rgba(196, 0, 0, 0.7);
    }   

    #cube > div:nth-child(4) {
        -webkit-transform: rotateY(-90deg) translateZ(150px);
        -moz-transform: rotateY(-90deg) translateZ(150px);
        background-color: rgba(0, 0, 196, 0.7);
    }

    #cube > div:nth-child(5) {
        -webkit-transform: rotateX(90deg) translateZ(150px);
        -moz-transform: rotateX(90deg) translateZ(150px);
        background-color: rgba(196, 196, 0, 0.7);
    }

    #cube > div:nth-child(6) {
        -webkit-transform: rotateX(-90deg) translateZ(150px);
        -moz-transform: rotateX(-90deg) translateZ(150px);
        background-color: rgba(196, 0, 196, 0.7);
    }

    .radio_alignment{
        margin:auto;
        text-align:center;
    }
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">

    var enlarged = false;

    function rotate_3D(x_Angle, y_Angle, z_Angle) {
        $("#cube").css({ "animation": "none" });
        $("#cube").css({ "-webkit-transform": "rotateX(" + x_Angle + "deg) rotateY(" + y_Angle + "deg) rotateZ(" + z_Angle + "deg)" });
    }

    function animate1() {
        setTimeout(function () {
            $("#cube").css({ "animation": "" });
        }, 10);
    }

    function stop_anime() {
        $("#cube").css({ "animation": "none" });
    }

</script>

<div id="box">
    <div id="cube">
        <div >1</div>
        <div >2</div>
        <div onclick="window.open('https://www.google.com/maps')"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d321303.3268281848!2d-114.35433369398585!3d51.01278199569303!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x537170039f843fd5%3A0x266d3bb1b652b63a!2sCalgary%2C+AB!5e0!3m2!1sfr!2sca!4v1519065821007" width="300" height="225" frameborder="0" style="border:0" allowfullscreen></iframe></div>
        <div >4</div>
        <div >5</div>
        <div onclick="window.open('https://www.youtube.com/embed/0I27JCFMIQM')"><iframe width="280" height="160" src="https://www.youtube.com/embed/0I27JCFMIQM" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
    </div>
</div>

<div class="radio_alignment">
    <input type="radio" name="select_face" onclick="rotate_3D(0,0,0)" checked="checked" />
    <input type="radio" name="select_face" onclick="rotate_3D(0,-90,0)" />
    <input type="radio" name="select_face" onclick="rotate_3D(0,180,0)" />
    <input type="radio" name="select_face" onclick="rotate_3D(0,90,0)" />
    <input type="radio" name="select_face" onclick="rotate_3D(-90,0,0)" />
    <input type="radio" name="select_face" onclick="rotate_3D(90,0,0)" /><br />
    <button type="button" onclick="animate1()">animate</button>
    <button type="button" onclick="stop_anime()">stop</button>
</div>

reference:
https://www.creativebloq.com/css3/20-stunning-examples-css-3d-transforms-11112759
https://paulrhayes.com/animated-css3-cube-interface-using-3d-transforms/
https://developer.mozilla.org/fr/docs/Web/CSS/perspective
http://jsfiddle.net/leaverou/xK6sa/2/