CSS3 Transform on :hover working on half the element - html

Question

I'm trying to make a simple square rotate slightly to the left when the user hovers over the element. I am rotating the element about the Y axis. When I hover over the element it looks like the left half of the element is correctly raising the hover. When you attempt to hover the right side is quirky. I know it's definitely related to something within my transform. Hoping someone with more experience will be able to spot it.
Update:
I found a similar question here, but don't know what they mean in the answer. If I remove the height/width from the container element it works. But why?
:hover works only on lower part of rotateX transformed div
HTML:
<div class='container'>
<div class='tile'>
Tile
</div>
</div>
CSS:
.tile
{
border: 1px solid black;
width: 100px;
height: 100px;
box-shadow: 2px 2px 5px #888888;
border-radius: 12px;
-moz-transition: all .5s linear;
-o-transition: all .5s linear;
-webkit-transition: all .5s linear;
transition: all .5s linear;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
position: absolute;
}
.tile:hover
{
-webkit-transform: rotateY(25deg);
transform: rotateY(25deg);
box-shadow: 10px 10px 5px #888888;
}
.container
{
position: relative;
margin: 10px auto;
width: 450px;
height: 281px;
}
http://codepen.io/cgatian/pen/lDejJ?editors=110

Answer 1

Change the hover from the .title to the .container. As the .title moves, the hover area change shape/location and causes the hover out.
http://jsbin.com/ripicesu/1/edit
CSS
.tile
{
border: 1px solid black;
width: 100px;
height: 100px;
box-shadow: 2px 2px 5px #888888;
border-radius: 12px;
-moz-transition: all .5s linear;
-o-transition: all .5s linear;
-webkit-transition: all .5s linear;
transition: all .5s linear;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
position: absolute;
}
li:hover .tile
{
-webkit-transform: rotateY(25deg);
transform: rotateY(25deg);
box-shadow: 10px 10px 5px #888888;
}
.container
{
position: relative;
margin: 10px auto;
width: 100px;
height: 100px;
}
li {
list-style-type: none;
display: block;
width: 100px;
height: 100px;
}
HTML
<div class='container'>
<ul>
<li><div class='tile'>Tile</div></li>
<li><div class='tile'>Tile</div></li>
<li><div class='tile'>Tile</div></li>
<li><div class='tile'>Tile</div></li>
</ul>
</div>

Answer 2

You can remove container, than it's working. Change .tile position to relative and float:left and you can have as many as you like.
CSS
.tile
{
position: relative;
float: left;
text-align: center;
line-height: 100px;
border: 1px solid black;
width: 100px;
height: 100px;
box-shadow: 2px 2px 5px #888888;
border-radius: 12px;
-moz-transition: all .5s linear;
-o-transition: all .5s linear;
-webkit-transition: all .5s linear;
transition: all .5s linear;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}