title: Hover after rotateY doesn't work
body: <p>I've written a function to print a two-dimensional array and used CSS and JS to make it fancy. Now, I'm thinking about a way to print (visualize) a three-dimensional array. Experimenting for now.</p>
  
  <p>In the output, a table contains the array items and table cells have hover effect to indicate the item's position in the array.</p>
  
  <p><a href="http://jsfiddle.net/uazfrvt1/4/" rel="nofollow">2D array print example</a></p>
  
  <pre><code>.arrayPrint { /* the table */
      font: 14px consolas, arial, sans-serif;
      cursor: default;
      border-collapse: collapse;
      margin: 20px;
      transform: perspective(500px) rotateY(15deg);
  }
  .arrayPrint td {
      padding: 5px;
      border: 1px solid silver;
  }
  .arrayPrint td.index {
      background: gainsboro;
  }
  .arrayPrint tr.mdarr:hover td.index.row-index {
      background: HotPink;
  }
  .arrayPrint tr.mdarr td.index.row-index:hover {
      background: gainsboro;
  }
  .arrayPrint tr.mdarr td:hover:not(.index) {
      background: mistyrose;
  }
  .arrayPrint tr.mdarr td.col-index-hover {
      background: HotPink;
  }
  </code></pre>
  
  <p>I added <code>rotateY</code> to the table to give it a depth, but that messes up the hover effect. The side that gets farther from the screen is out of reach. Hover effect doesn't work on that area. Is there a way to fix that?</p>
  
  <p><strong>Edit</strong>:It turns out this is Google Chrome specific problem (sigh...) FF runs it fine. Don't care about IE.</p>