Firefox: Not clickable inside CSS3 cube

Question

You can click on the left, right and back side. The click effect is working fine in Chrome, Safari and Opera. But it doesn't work with Firefox. It only detects the .cube class and not .right, .left or .back.

/**
 * Click effects
 */
(function clickEffects() {
    $(".left").click(function() {
        $(this).toggleClass("left-toggle");
        $(".only-text").toggleClass("sb-thumb-colored");
    }).find("input").click(function(e) {
        return false;
    });

    $(".right").click(function() {
        $(this).toggleClass("right-toggle");
        $(this).children("div").children("div:nth-of-type(2)").toggleClass("sb-thumb-colored");
    }).find("input").click(function(e) {
        return false;
    });

    $(".back").click(function() {
        $(this).toggleClass("back-toggle");
        $(this).children("div").children("div:nth-of-type(2)").toggleClass("sb-thumb-colored");
    }).find("input").click(function(e) {
        return false;
    });
})();

/**
 * Adjust top, bottom and back
 */
(function() {
    function resize() {
        var top = document.getElementById("top");
        var bottom = document.getElementById("bottom");
        var left = document.getElementById("left");
        var back = document.getElementById("back");

        var w = parseInt(window.getComputedStyle(left, null).getPropertyValue("width"));
        var h = parseInt(window.getComputedStyle(left, null).getPropertyValue("height"));

        top.style.height = w + "px";
        bottom.style.top = h + "px";
        bottom.style.height = w + "px";
        back.style.transform = "translateZ(" + (w * (-1)) + "px" + ")";
    }

    resize();
    window.addEventListener("resize", resize);
})();

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
}

.wrap {
    color: white;
    font-size: 18px;
    perspective: 500px;
    perspective-origin: 50% 50%;
    width: inherit;
    height: inherit;
    width: 100%;
    height: 100%;
}

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

.cube > div {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    background: darkgrey;
    border: 3px solid brown;
}

.cube > div:not(.bottom):not(.top) {
    padding: 30px 60px;
}

.cube > .front {
    display: none;
}

.back {
    transform: translateZ(-1400px);
    -webkit-transform: translateZ(-1400px);
    transition: all 0.2s ease-in;
}

.back-toggle {
    transform: translateZ(0px) !important;
    -webkit-transform: translateZ(0px) !important;
}

.left {
    transform: rotateY(90deg);
    -webkit-transform: rotateY(90deg);
    transform-origin: left center;
    -webkit-transform-origin: left center;
    transition: all 0.2s ease-in;
}

.left-toggle {
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
}

.right {
    transform-origin: right top;
    -webkit-transform-origin: right top;
    transform: rotateY(-90deg);
    -webkit-transform: rotateY(-90deg);
    transition: all 0.2s ease-in;
}

.right-toggle {
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
}

.bottom {
    transform: rotateX(-90deg);
    -webkit-transform: rotateX(-90deg);
    transform-origin: top;
    -webkit-transform-origin: top;
}

.top {
    transform-origin: top;
    -webkit-transform-origin: top;
    transform: rotateX(-90deg);
    -webkit-transform: rotateX(-90deg);
}

.front {
    transform: translateZ(100px);
    -webkit-transform: translateZ(100px);
    pointer-events: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="wrap" class="wrap">
    <div class="cube">
        <div class="front">
            <div>front</div>
        </div>
        <div id="back" class="back">
            <div>back</div>
            <img src="https://unsplash.it/200/200" alt="">
        </div>
        <div id="bottom" class="bottom">
            <div>bottom</div>
            <img src="https://unsplash.it/200/200" alt="">
        </div>
        <div id="top" class="top">
            <div>top</div>
            <img src="https://unsplash.it/200/200" alt="">
        </div>
        <div id="left" class="left">
            <div>left</div>
            <img src="https://unsplash.it/200/200" alt="">
        </div>
        <div class="right">
            <div>right</div>
            <img src="https://unsplash.it/200/200" alt="">
        </div>
    </div>
</div>

JSFiddle

How can this be solved?