Solved

CSS3 can't get scaleX to work

Posted on 2013-12-03
4
331 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 54

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 54

Expert Comment

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

Featured Post

Comprehensive Backup Solutions for Microsoft

Acronis protects the complete Microsoft technology stack: Windows Server, Windows PC, laptop and Surface data; Microsoft business applications; Microsoft Hyper-V; Azure VMs; Microsoft Windows Server 2016; Microsoft Exchange 2016 and SQL Server 2016.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Why my select dropdown does not work? 8 41
Hide http port number 5 42
Disable SSLv3.0/TLSv1.0 - Windows 2012R2 3 34
How to show span when clicked on? 10 22
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
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.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

809 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