Solved

CSS3 can't get scaleX to work

Posted on 2013-12-03
4
333 Views
Last Modified: 2013-12-04
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
Comment
Question by:saturation
  • 2
4 Comments
 
LVL 56

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 39694709
Try changing transition => transform
0
 

Author Closing Comment

by:saturation
ID: 39695697
Worked perfect--I overlooked it, thanks!.  

JulianH, I'll put code tags around next time.
0
 
LVL 56

Expert Comment

by:Julian Hansen
ID: 39696039
You are welcome - thanks for the points.
0

Featured Post

Windows Server 2016: All you need to know

Learn about Hyper-V features that increase functionality and usability of Microsoft Windows Server 2016. Also, throughout this eBook, you’ll find some basic PowerShell examples that will help you leverage the scripts in your environments!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Lync server 2013 or Skype for business Backup Service Error ID 4049 – After File Share Migration
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question