在多维数据集中单击鼠标不起作用

Question

鼠标用于.wrap、.cube和.front，但不用于.left、.right、.top、.bottom和.back。

HTML

<div class="wrap">
    <div class="cube">
        <div class="front">front</div>
        <div class="back">
            <div class="content">
                <div class="video-wrapper" data-min-width="125" data-width="0.6">
                    <iframe data-aspect-ratio="16:9" src="https://www.youtube.com/embed/PnwEkeSed5Y" frameborder="0" allowfullscreen></iframe>
                </div>
                <div class="text">
                    <h4>Video 1</h4>
                    <p>
                        Cortado at cultivar irish, trifecta roast that whipped spoon lungo aftertaste. Et eu, single origin, cappuccino beans, kopi-luwak grinder ristretto aromatic extra. At robust mazagran, in lungo cultivar aromatic irish. Id as decaffeinated lungo steamed
                        medium cream filter americano. Cortado at cultivar irish, trifecta roast that whipped spoon lungo aftertaste. Et eu, single origin, cappuccino beans, kopi-luwak grinder ristretto aromatic extra. At robust mazagran, in lungo cultivar
                        aromatic irish. Id as decaffeinated lungo steamed medium cream filter americano.
                    </p>
                </div>
            </div>
        </div>
        <div class="bottom">
        </div>
        <div class="top">
        </div>
        <div class="left">
            <div class="content">
                <div class="video-wrapper" data-min-width="125" data-width="0.6">
                    <iframe data-aspect-ratio="16:9" src="https://www.youtube.com/embed/PnwEkeSed5Y" frameborder="0" allowfullscreen></iframe>
                </div>
                <div class="text">
                    <h4>Video 1</h4>
                    <p>
                        Cortado at cultivar irish, trifecta roast that whipped spoon lungo aftertaste. Et eu, single origin, cappuccino beans, kopi-luwak grinder ristretto aromatic extra. At robust mazagran, in lungo cultivar aromatic irish. Id as decaffeinated lungo steamed
                        medium cream filter americano. Cortado at cultivar irish, trifecta roast that whipped spoon lungo aftertaste. Et eu, single origin, cappuccino beans, kopi-luwak grinder ristretto aromatic extra. At robust mazagran, in lungo cultivar
                        aromatic irish. Id as decaffeinated lungo steamed medium cream filter americano.
                    </p>
                </div>
            </div>
        </div>
        <div class="right">
            <iframe data-aspect-ratio="16:9" src="https://www.youtube.com/embed/PnwEkeSed5Y" frameborder="0" allowfullscreen></iframe>
            <h4>Theorie</h4>
            <p>
                Cortado at cultivar irish, trifecta roast that whipped spoon lungo aftertaste. Et eu, single origin, cappuccino beans, kopi-luwak grinder ristretto aromatic extra. At robust mazagran, in lungo cultivar aromatic irish. Id as decaffeinated lungo steamed
                medium cream filter americano. Cortado at cultivar irish, trifecta roast that whipped spoon lungo aftertaste. Et eu, single origin, cappuccino beans, kopi-luwak grinder ristretto aromatic extra. At robust mazagran, in lungo cultivar aromatic
                irish. Id as decaffeinated lungo steamed medium cream filter americano.
            </p>
        </div>
    </div>
</div>

CSS

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html,
body {
    width: 100%;
    height: 100%;
}
.wrap {
    perspective: 600px;
    perspective-origin: 50% 100px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.cube {
    position: relative;
    transform-style: preserve-3d;
    height: 100%;
    width: 100%;
}
.cube > div {
    position: absolute;
    height: 100%;
    width: 100%;
}
.cube > div:not(.front) {
    border: 1px solid black;
    background: lightgrey;
}
.back {
    transform: rotateY(180deg) translateZ(400px);
    //transform:  translateZ(400px);
}
.left {
    transform: rotateY(270deg) translateX(-400px);
    transform-origin: left center;
}
.right {
    transform: rotateY(-270deg) translateX(400px);
    transform-origin: right top;
}
.bottom {
    transform: rotateX(90deg) translateY(10px);
    transform-origin: center bottom;
}
.top {
    transform: rotateX(-90deg) translateY(30px);
    transform-origin: left top;
}
.front {
    transform: translateZ(100px);
}
.content {
    padding: 15px;
    width: 100%;
    height: 100%;
    transform: rotateY(180deg);
}
.content > div {
    float: left;
}
.content > .video-wrapper {
    line-height: 100%;
}
.content > .text {
    width: 35%;
    padding-left: 15px;
    text-align: left;
}
.only-video {
    width: inherit;
    height: inherit;
}
.only-video iframe {
    width: inherit;
    height: inherit;
}

如何使鼠标单击在多维数据集中工作？

JSFiddle

Answer 1

.back变成可点击的（至少在FF中是这样）

还原.背面样式：

.back {height: 100%;}

也许这也适用于其他元素，即在它们自己的选择器中只设置所需的宽度或高度。

编辑：vals建议的指针事件是一种更好的方法。