transforms2 unprefixed

by CoolBlue

HTML

<div class="table-wrapper">
<table border="0" width="100%">
    <tr id = "header">
        <th><b>COL1 (move your mouse here...)</b></th>
        <th><b>COL2 (or here)</b></th>
    </tr>
    <tr>
        <td>Hello</td>
        <td>world</td>
    </tr>
    <tr>
        <td>Hello</td>
        <td>world</td>
    </tr>
    <tr>
        <td>Hello</td>
        <td>world</td>
    </tr>
    <tr>
        <td>Hello</td>
        <td>world</td>
    </tr>
    <tr>
        <td>Hello</td>
        <td>world</td>
    </tr>
    <tr>
        <td>Hello</td>
        <td>world</td>
    </tr>
    <tr>
        <td>Hello</td>
        <td>world</td>
    </tr>
    <tr>
        <td>Hello</td>
        <td>world</td>
    </tr>
    <tr>
        <td>Hello</td>
        <td>world</td>
    </tr>
    <tr>
        <td>Hello</td>
        <td>world</td>
    </tr>
    <tr>
        <td>Hello</td>
        <td>world</td>
    </tr>
    <tr>
        <td>Hello</td>
        <td>world</td>
    </tr>
    <tr>
        <td>Hello</td>
        <td>world</td>
    </tr>
    <tr>
        <td>Hello</td>
        <td>world</td>
    </tr>
    <tr>
        <td>Hello</td>
        <td>world</td>
    </tr>
    <tr>
        <td>Hello</td>
        <td>world</td>
    </tr>
    <tr>
        <td>Hello</td>
        <td>world</td>
    </tr>
</table>
</div>
<p id="rowCount">Row Count: </p>

CSS

body{
    counter-reset: rowCount;
}
table {
    color: #000000; 
    table-layout: auto;
    border-collapse: seperate; border-spacing: 1px 0px;
    text-align: left;
    transform: perspective(2000px);
    cursor: default;
    background-image: url(https://dl.dropboxusercontent.com/u/109599513/CB.png);
    background-size: contain; background-attachment: fixed;
    counter-reset: triggered;
    -webkit-font-smoothing: antialiased;
}
td{/* Base State */ 
    
    /*Static elements*/
    padding-left: 1%;                             /*not inherited from table*/
    padding-top: 0px; padding-bottom: 0px;        /*influences vertical pitch*/
    border: 0 solid #FFFFFF;                      /*influences vertical pitch*/

    /*Dynamic elements*/
    
    transform-style: preserve-3d;

    background-image: linear-gradient(to bottom,#0033CC,#FFFFDB);    /*    #B2B28F,#FFFFCC*/

    opacity: 0.5;
    filter: opacity(50%);    
    
    transform: rotateX(-80deg) skewX(30deg);    
    backface-visibility: hidden;

    line-height: 20%;
    
    transition: line-height 0.6s, 
                background-image 0.6s ease,
                opacity 0.6s ease,
                transform 0.6s ease;
/*    -webkit-font-smoothing: antialiased;*/
}

table:hover td {
    /*transform backgroyund gradiant*/
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#0033CC), to(#FFFFDB));
    background: -webkit-linear-gradient(to top, #0033CC, #FFFFDB);
    background: -moz-linear-gradient(to top, #0033CC, #FFFFDB);
    background: -o-linear-gradient(to top, #0033CC, #FFFFDB);
    background: linear-gradient(to top, #0033CC, #FFFFDB);            /*  #595948,#FFFFCC*/
    
    /*transform opacity for the element*/
    opacity: 0.6;
    filter: opacity(50%);
    
    /*Rotate X */
    transform: rotateX(0deg) skew(5deg);

    /*adjust line spacing comensurate with rotate X*/
    line-height: 115%;
    /*transition: all, 0.1s, ease*/
}
tr:not(#header):hover td{
    /*highlight current...