2016-04-06 34 views
0

を働いていないキューブ内をクリックします。マウスは、マウスが<code>.wrap</code>、<code>.cube</code>と<code>.front</code>のために働いてではなく、<code>.left</code>、<code>.right</code>、<code>.top</code>、<code>.bottom</code>と<code>.back</code>のためにされ

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

+1

ポインタイベントを設定します。正面に、それは他のものをマスキングしている – vals

+0

それです!どうもありがとうございました! – Sun

答えて

0

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

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

関連する問題