2D transform working in FF, IE9, O, but not Webkit?

HTML & CSS
1

I’m baffled by this one. I want to apply a CSS skew transform to the <li>'s in a horizontal menu of links. And the code I’ve written works (the skew is applied) in three of the five latest browsers: FF, IE9, and Opera – but not Chrome or Safari!?!

Here is an example of the test HTML:


<!DOCTYPE HTML>
<html>
<head>
<title>Skew Test</title>
<link rel="stylesheet" href="test.css" type="text/css" />
</head>

<body>
<nav>
<ul>
<li>
<a href="#">link 1</a>
</li>
<li>
<a href="#">link 2</a>
</li>
<li>
<a href="#">link 3</a>
</li>
</ul>
</nav>
<nav>
<ul>
<li class="skewed">
<a href="#">link 1</a>
</li>
<li class="skewed">
<a href="#">link 2</a>
</li>
<li class="skewed">
<a href="#">link 3</a>
</li>
</ul>
</nav>
</body>
</html>

And here is the CSS:


nav {
    display:block;
    margin:15px;
    padding:15px;
    height:100px;
}

ul {
    list-style-type:none;
    margin:25px 0px;
    padding:0;
}

li {
    display:inline;
    background:#0C3;
    width: 30px;
    height:50px;
    margin: 15px 5px;
    padding:10px 10px;
    border:#F03 thick solid;
}

.skewed {
  /* skew the object horizontally by 20 degrees clockwise */
  -moz-transform: skew(-20deg, 0deg);
  -ms-transform: skew(-20deg, 0deg);
  -o-transform: skew(-20deg, 0deg);
  -webkit-transform: skew(-20deg, 0 deg);
  transform: skew(-20deg, 0 deg);
}

As I said, this works for me – the <li>'s all skew properly – in 3 browsers, but not in the ones that were first to come out with CSS transformations (Webkit)!
What in the world am I doing wrong? Where is the bug in my css?

2

Hi,

You have 2 spaces before the deg unit which webkit doesn’t like and you have set the element to inline and webkit won’t apply this property to inline elements. The element needs to be block or inline-block in order for dimensions to be applied anyway.

This is working.


<!DOCTYPE HTML>
<html>
<head>
<title>Skew Test</title>
<link rel="stylesheet" href="test.css" type="text/css" />
<style>
nav {
    display:block;
    margin:15px;
    padding:15px;
    height:100px;
}

ul {
    list-style-type:none;
    margin:25px 0px;
    padding:0;
}

li {
  [B]  display:inline-block;[/B]
    background:#0C3;
    width: 50px;
    margin: 15px 5px;
    padding:10px 10px;
    border:#F03 thick solid;
}

.skewed {
  /* skew the object horizontally by 20 degrees clockwise */
  -moz-transform: skew(-20deg, 0deg);
  -ms-transform: skew(-20deg, 0deg);
  -o-transform: skew(-20deg, 0deg);
[B]  -webkit-transform: skew(-20deg, 0deg);
  transform: skew(-20deg, 0deg);[/B]
}

</style>
</head>
<body>
<nav>
    <ul>
        <li> <a href="#">link 1</a> </li>
        <li> <a href="#">link 2</a> </li>
        <li> <a href="#">link 3</a> </li>
    </ul>
</nav>
<nav>
    <ul>
        <li class="skewed"> <a href="#">link 1</a> </li>
        <li class="skewed"> <a href="#">link 2</a> </li>
        <li class="skewed"> <a href="#">link 3</a> </li>
    </ul>
</nav>
</body>
</html>
3

:slight_smile: Thank you! That got it - and taught me something I didn’t know (that dimensions are not applied to inline li elements).