html - :hover working on half the element 上的 CSS3 转换

Question

当用户将鼠标悬停在元素上时，我试图让一个简单的正方形稍微向左旋转。我正在围绕 Y 轴旋转元素。当我将鼠标悬停在元素上时，看起来元素的左半部分正确地抬起了悬停。当您尝试将鼠标悬停在右侧时，这很古怪。我知道这肯定与我的转换中的某些东西有关。希望有更多经验的人能够发现它。

更新: 我在这里发现了一个类似的问题，但不知道他们在答案中的意思。如果我从它工作的容器元素中删除高度/宽度。但为什么？ :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

将悬停从 .title 更改为 .container。随着 .title 的移动，悬停区域会改变形状/位置并导致悬停。

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>