rotateX problem

1. If I take this transform: rotatex(0) out of tr:hover td, the tool tip breaks. 2. tr:active td selector doesn't work in IE11

by CoolBlue

HTML

<body>
    <div class="table-wrapper">
        <table border="0" width="75%" draggable="false">
            <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>
          ...

CSS

body {
	content: attr(draggable) "false";
	counter-reset: rowCount;
}

table {
	color: #000000;
	table-layout: auto;
	border-collapse: seperate;
	border-spacing: 1px 0;
	text-align: left;
	cursor: default;
	background-image: url(https://dl.dropboxusercontent.com/u/109599513/CB.png);
	background-size: contain;
	background-attachment: fixed;
}

td {
	/*Dynamic elements*/
	background-image: linear-gradient(to top, #0033CC, #FFFFDB);
	opacity: 0.5;
}

/*Row hover*/
tr:hover td {
	/*transform background gradient*/
	background: linear-gradient(to top,#4D70DB,#FFFF00);
	/*transform opacity for the element*/
	opacity: 0.8;
	/*Why is this needed?????????????????????????????????????????????????*/
	-moz-transform: rotatex(0);
	-ms-transform: rotatex(0);
	-o-transform: rotatex(0);
	-webkit-transform: rotatex(0);
	transform: rotatex(0);
	/*???????????????????????????????????????????????????????????????????*/
}

/* Tool tip */
tr:hover td:last-child:after {
	content: 'Click to SELECT';
	display: block;
	padding: 4px 8px;
	position: absolute;
	left: calc(100% + 6px);
	top: -15%;
	white-space: nowrap;
	background-image: linear-gradient(to top,#4D70DB,#FFFF00);
	border-radius: 5px;
	box-shadow: 0 0 4px #000014;
	color: black;
	opacity: 1.0;
}
tr:hover td:last-child:before{
  /*make a little arrow beside the tool tip */
  content: '';
  border: solid;
  width: 0; height: 0;
  border-color: transparent #A6A6CF transparent transparent;
  border-width: 6px 6px 6px 0;
  bottom: calc(50% - 6px);
  left: 100%;
  position: absolute;
  z-index: 99;
}

/*Row select*/
tr:active td {
	opacity: 1.0;
	color: red;
	background-image: linear-gradient(to top,#4D70DB,#FF8585);
}
td:active td {
	opacity: 1.0;
	color: red;
	background-image: linear-gradient(to top,#4D70DB,#FF8585);
}
tr:active td:last-child:after {
	content: 'SELECTED';
	display: block;
	padding: 4px 8px;
	position: absolute;
	left: calc(100% + 6px);
	top: -15%;
	white-space: nowrap;
	background-image: linear-gradient(to...