transforms2 prefixed

by CoolBlue

HTML

<div class="table-wrapper">
    <table  id='active' 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>
<span id="rowCount">Row Count: </span>
<span id="selected">Selected Cell: </span>

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 */
    -webkit-transform: rotateX(0deg) skew(5deg);
    /*adjust line spacing comensurate...

JavaScript

(function () {
    
    window.addEventListener('load', initCollabsableList, false);
    //alert('bound');

    function initCollabsableList() {
        var defSelected = $('#selected').text();
        //alert('load defSelected '+ defSelected);
        $('#active td').on('click', function (ex) {
            var exSource = ex.target,
                mCol = $(exSource).index() + 1,
                mRow = $(exSource).closest("tr").index(),
                ms = "";
            ms = 'clicked ' + exSource.tagName + ' >> row : ' + mRow + ' col : ' + mCol;
            $('#selected').text(defSelected + ms);
            return false;
        });
    }
}());