Html CSS3转换打开：悬停在元素的一半上

当用户将鼠标悬停在元素上时，我试图使一个简单的正方形稍微向左旋转。我正在绕Y轴旋转元素。当我将鼠标悬停在元素上时，元素的左半部分似乎正确地升起了鼠标悬停。当你试图在右边盘旋时，这是很奇怪的。我知道这肯定与我的转变有关。希望有更多经验的人能够发现它

更新： 我在这里发现了一个类似的问题，但不知道答案中的意思。如果我从容器元素中删除高度/宽度，它就会工作。但是为什么呢？

HTML:

<div class='container'>
  <div class='tile'>
          Tile
  </div>
</div>

   .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;
    }

---

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

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>

瓦片
瓦片
瓦片
瓦片

您可以移除容器，然后它就可以工作了。将

.tile

位置更改为相对和

浮动：左

，您可以拥有任意数量

CSS

---

虽然这样做有效，但在使用多个平铺时它会崩溃。每个元素都需要自己的容器。不是语义，是的，但是，如果你变换命中区域，你会得到奇怪的结果。因此，在每个LI中放置一个DIV，并对DIV:hover进行转换。是的，您是正确的。你能用你刚才说的基本内容更新答案吗？我会接受的！

.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;
}