CODEWITHSUNDEEP
htmlcss
Vel Murugan S
Vel Murugan S

Reputation: 580

css3 transform rotate 90deg not working

Issue:

Each "li" tag not coming one by one (fixed from top left). Instead it flows from left to right...

My HTML is:

<div class="fixed-button">
    <ul>
        <li><a href="#" title="">Contact Us</a></li>
        <li><a href="#" title="">nh;kjfwae ilfmnsdkl;</a></li>
    </ul>
</div>

And CSS is:

div.fixed-button{
    position: absolute;
    display: block!important;
    width: 0;
    height: 0;
    z-index: 90000;
    margin: 0;
    outline: 0;
    top: 200px;
}
div.fixed-button a{
    background: url("images/fix-bug-repeat.png") repeat 0 0;
    margin-left: -33px;
    height: auto;
    padding: 10px 14px;
    font: bold 13px/16px arial, sans-serif;
    color: white;
    text-align: center;
    -moz-transform: scale(1) rotate(90deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    -webkit-transform: scale(1) rotate(90deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    -o-transform: scale(1) rotate(90deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    -ms-transform: scale(1) rotate(90deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    transform: scale(1) rotate(90deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    white-space: nowrap;
    position: absolute;
    left: 0;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    border-bottom-width: 0;        
    margin-bottom: 20px;
    text-decoration: none;
}

I tried all the possible ways. But not working. Please fix this bug.

Upvotes: 2

Views: 14328

Answers (1)

Shubhanshu Mishra
Shubhanshu Mishra

Reputation: 6720

You are applying the transform on wrong element. Instead of applying it on each <a> tag apply it on the <ul> as a whole.

Also to make the links appear side by side even for a horizontal case [read normal without transform] we use float: left; on the <li> tag.

Here is the full code:

<div class="fixed-button">
    <ul>
        <li><a href="#" title="">Contact Us</a></li>
        <li><a href="#" title="">Shubhanshu Mishra</a></li>
        <li><a href="#" title="">SmexyyWeby</a></li>
        <li><a href="#" title="">SmexyyWeby</a></li>
    </ul>
</div>​

I have just added the webkit transform you can add the transform for other elements in the same tag.

Also your <a> tag was having property position:absolute; which should be removed to make the links appear properly.

Here is the final CSS I have used:

div.fixed-button{
 position: absolute;
 display: block!important;
 z-index: 90000;
 margin: 0;
 outline: 0;
 top: 200px;
}

.fixed-button ul{
    -webkit-transform: scale(1) rotate(90deg) translate(0px, 0px);
    margin-left: 50px;
    -webkit-transform-origin: 0% 0 0;
}

div.fixed-button a {
    background-color: black;
    height: auto;
    padding: 10px 14px;
    font: bold 13px/16px arial, sans-serif;
    color: white;
    text-align: center;
    white-space: nowrap;
    text-decoration: none;
}

li{
    float: left;
}​

The 120px in -webkit-transform: translate(0px, 120px) should be set according to your needs in your css as it is changes for different layout and translates the list horizontally.

UPDATE: I have updated the code by using -webkit-transform-origin attribute which will allow you to set the origin about which to rotate your element and also setting a margin-left for proper placement. It works effectively for as many number of <li> elements as you want. You can check the new code at the link below.

Do check the working code at: http://jsfiddle.net/shubhanshumishra/qhS6r/

Upvotes: 2

Related Questions