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>

Answer 2

您可以移除容器，而不是它正在工作。将.tile职位更改为亲戚和float:left，您可以拥有任意数量的职位。

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

CSS3转换：将鼠标悬停在元素的一半上

2 个答案: