CSS3 Transform : Chrome Solution

Question

As I am new to transform and -ms-transform and -webkit-transform, I can't make this code work as expected:

<nav>
    <ul>
        <li><a target="_parent" href="index.php" class="button">Home</a></li>
        <li><a target="_parent" href="about.html" class="button">About</a></li>
        <li><a target="_parent" href="login/reg.php" class="button">Register</a></li>
        <li><a target="_parent" href="private/" class="button">Member</a></li>
        <li><a target="_parent" href="chat.php" class="button">Chat</a></li>
        <li><a target="_parent" href="http://yo.hostei.com" class="button">URL Shortener</a></li>
        <li><a target="_parent" href="http://sql17.000webhost.com/phpMyAdmin/index.php?db=a7593238_data" class="button">Admin</a></li>
    </ul>
</nav>
<style>
    nav {
        text-align:center;
        width:100%;
    }
    ul li {
        list-style:none;
        text-align:center;
        display:inline-block;
    }
    .button {
        text-decoration:none;
        color:#000000;
        padding:10px 20px;
        text-align:center;
    }
    .button:hover {
        -ms-transform:translateY(10px);
        -webkit-transform:translateY(10px);
        transform:translateY(10px);
        background-color:#cccccc;
    }
</style>

So when I move the mouse over it, the <a class="button"> element should transform itself down 10 pixels.

What's the problem here?

Try applying the transform to the `li` - http://jsfiddle.net/Ru4wR/ — Paulie_D, Apr 28 '14 at 11:47
Good. Please post your comment as an answer so I can accept it, contributing to the stackoverflow community. Also give some explanation if you can. — Jamie, Apr 28 '14 at 11:49
See this discussion : http://stackoverflow.com/questions/14883250/css-transform-doesnt-work-on-inline-elements — Fabrizio Calderan, Apr 28 '14 at 11:49

André Dion · Answer 1 · 2014-04-28T11:56:35.457

2

Set display:block on the elements you're transforming:

.button {
    display: block; /* transform needs a display value other than inline */
    text-decoration:none;
    color:#000000;
    padding:10px 20px;
    text-align:center;
}

DEMO

edited Apr 28 '14 at 11:56

answered Apr 28 '14 at 11:49

André Dion

21,269
7
56
60

This is clear, but I should not accept this answer so, because `@Paulie_D gives the solution first, accepted to transform the comment to answer thus provided an additional method.` – Jamie Apr 28 '14 at 11:51
Technically you have more than two options. Just note that the crux of your issue is that you're trying to apply `transform` to an element that is `inline` which won't work. You'll need `display: block` or `display: inline-block` in order for the transform to have any visual effect. There are [other `display` values](http://stackoverflow.com/questions/14883250/css-transform-doesnt-work-on-inline-elements) that will work as well, depending on your needs. – André Dion Apr 28 '14 at 11:53

score 1 · Accepted Answer · answered Apr 28 '14 at 11:49

You have two options.

Apply the transform to the li or add display:block to the anchor

JSfiddle with 2nd option

CSS

nav {
    text-align:center;
    width:100%;
}
ul li {
    list-style:none;
    text-align:center;
    display:inline-block;
}
.button {
    text-decoration:none;
    color:#000000;
    padding:10px 20px;
    text-align:center;
    display: block;
}
.button:hover {
    -ms-transform:translateY(10px);
    -webkit-transform:translateY(10px);
    transform:translateY(10px);
    background-color:#cccccc;
}

CSS3 Transform : Chrome Solution

2 Answers2