transforms

by CoolBlue

HTML

<table border="0" width="90%">
    <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>
    <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>

CSS

table {
    color: #000000;
    table-layout: auto;
    border-collapse: seperate; border-spacing: 2px 0px;
    border-spacing: 1px;
    text-align: left;
    transform: perspective(2000px);
    cursor: default;
}

td{
    background: linear-gradient(to bottom,#B2B28F,#FFFFCC);
    opacity: 0.6;
    padding-left: 1%;                     /*not inherited from table*/
    padding-top: 0px; padding-bottom: 0;  /*influences vertical pitch*/
    border: 0 solid #FFFFFF;              /*influences vertical pitch*/
    transform: rotateX(-45deg) skewX(15deg);
    transform-style: preserve-3d;transition: all 0.5s ease;
    line-height: 60%;
    transition: all .3s ease;
}

tr:not(#header):hover td {
    background: linear-gradient(to top,#B2B28F,#FFFFCC);
    opacity: 0.8;
    
    /* Rotate td */
    transform: rotateX(0deg) skew(5deg);
    /* Standard syntax */
    line-height: 115%;
}
th {padding-left: 1%;                     /*not inherited from table*/
    text-align: inherit;
    color: #B2B28F; background-color: #0000CC;opacity: 1.0;}
tr(#header):hover td {
    background: linear-gradient(to top,#B2B28F,#FFFFCC);
    opacity: 0.8;
    
    /* Rotate td */
    transform: rotateX(0deg) skew(5deg);
    /* Standard syntax */
    line-height: 115%;
}