Firefox：CSS3多维数据集

Question

您可以单击左侧，右侧和后侧。点击效果在Chrome，Safari和Opera中运行良好。但是Firefox的不起作用。它仅检测.cube课程，而不是.right，.left或.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

如何解决这个问题？