Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 357
  • Last Modified:

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>

Open in new window

0
saturation
Asked:
saturation
  • 2
1 Solution
 
Julian HansenCommented:
Try changing transition => transform
0
 
saturationAuthor Commented:
Worked perfect--I overlooked it, thanks!.  

JulianH, I'll put code tags around next time.
0
 
Julian HansenCommented:
You are welcome - thanks for the points.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now