鼠标单击内部立方体无法工作。

Question

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

<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 > div中移除宽度和高度时，.cube变得可点击(至少在FF中是如此)

还原.back样式：

.back {height: 100%;}

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

编辑:指针-由vals建议的事件是一个更好的方法。