マウスは、マウスが<code>.wrap</code>、<code>.cube</code>と<code>.front</code>のために働いてではなく、<code>.left</code>、<code>.right</code>、<code>.top</code>、<code>.bottom</code>と<code>.back</code>のためにされ

Question

を働いていないキューブ内をクリックします。

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; 
} 

キューブ内のマウスクリックを機能させるために何ができますか？

.back {height: 100%;} 

、多分この意志：あなたは.cube>のdiv

が.backスタイリングを復元から幅と高さを削除すると

JSFiddle

Answer 1

.backは、（少なくとも、FFに）クリック可能になり他の要素のためにも働きます。独自のセレクタ内で必要な幅または高さだけを設定します。

編集：valsによって提案されたポインタイベントははるかに良いアプローチです。