CODEWITHSUNDEEP
htmlcss
cgatian
cgatian

Reputation: 22984

CSS3 Transform on :hover working on half the element

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

Upvotes: 1

Views: 1942

Answers (2)

Aleksandar
Aleksandar

Reputation: 654

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

Upvotes: 0

Jason
Jason

Reputation: 4149

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>

Upvotes: 1

Related Questions