transforms2 prefixed

by CoolBlue

HTML

<div class="table-wrapper">
<table border="0" width="60%">
    <tr id = "header">
        <th><b>COL1</b></th>
        <th><b>COL2</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;
}
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*/
    
    background-image: linear-gradient(to bottom,#0033CC,#FFFFDB);    /*    #B2B28F,#FFFFCC*/
/*    background: -webkit-gradient(linear, 0 0, 0 100%, from(#FFFFDB), to(#0033CC));
    background: -webkit-linear-gradient(to bottom, #0033CC, #FFFFDB);
    background: -moz-linear-gradient(to bottom, #0033CC, #FFFFDB);
    background: -o-linear-gradient(to bottom, #0033CC, #FFFFDB);
    background: linear-gradient(to top, #0033CC, #FFFFDB);            /*  #595948,#FFFFCC*/
    
    opacity: 0.5;
    filter: opacity(50%);    
    
    -webkit-transform: rotateX(-80deg) skewX(30deg);    

    line-height: 20%;
    
    -webkit-transition: all 0.6s ease;
    -webkit-font-smoothing: antialiased;
}

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