saturation
asked on
CSS3 can't get scaleX to work
I have the following code below I'm using to test some animations, but the scaleX property doesn't seem to work when I mouseover the buttons (around lines 84). Code is below. Any ideas on how to get this to work?
<html>
<head>
<style>
header {
text-align: justify;
height: 5em;
/*padding: .9em 2%;*/
background: #484743;
color: #fff;
padding-right:200px;
}
header::after {
content: '';
display: inline-block;
width: 100%;
}
header > div,
header > div::before,
header nav,
header > div h1 {
display: inline-block;
vertical-align: middle;
}
header > div {
/* height: 100%;*/
}
header > div::before {
content: '';
/* height: 100%;*/
}
header > div h1 {
font-size: 20px;
color: #363636;
vertical-align:middle;
text-align:center;
padding:1.2em;
}
header > div.logobox {
background: #c4c4c4;
height:5em;
width:6em;
vertical-align: middle;
text-align: center;
}
header nav a {
padding:2.5em;
line-height: 3em;
white-space: nowrap;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 500;
font-size: 14px;
color: #ffffff;
text-transform: uppercase;
text-decoration: none;
vertical-align: middle;
}
header nav a:hover {
color:#484743;
background-color:#f2f2f2;
-webkit-transition: background .7s ease-in-out;
-moz-transition: background .7s ease-in-out;
-ms-transition: background .7s ease-in-out;
-o-transition: background .7s ease-in-out;
transition: background .7s ease-in-out;
}
header .linkbox {
/* background: #252525;*/
height: 4em;
display: inline-block;
vertical-align: middle;
padding: 1em 1em 0em 1em;
-webkit-transition: scaleX(1.5);
-moz-transition: scaleX(1.5);
-ms-transition: scaleX(1.5);
-o-transition: scaleX(1.5);
transition: scaleX(1.5);
}
header .linkbox:hover {
background: #444444;
vertical-align: middle;
}
</style>
</head>
<body>
<header>
<div class=logobox><h1>Logo</h1></div>
<nav>
<div class=linkbox><a href=#>Test 1</a></div>
<div class=linkbox><a href=#>TEst 2</a></div>
<div class=linkbox><a href=#>Test 3</a></div>
</nav>
</header>
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
You are welcome - thanks for the points.
ASKER
JulianH, I'll put code tags around next time.