가 작동하지 회전 90DEG 변환 CSS3

Question

문제 :

각각의 "리"태그 (왼쪽 상단에서 고정) 하나 하나 오지 않아.

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

을 그리고 CSS는 다음과 같습니다 : 대신은

내 HTML은 ... 왼쪽에서 오른쪽으로 흘러 나는 모든 가능한 방법을 시도

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; 
} 

. 하지만 일하지 않아. 이 버그를 수정하십시오.

Answer 1

잘못된 요소에 변형을 적용하고 있습니다. 각 <a> 태그에 적용하는 대신 전체적으로 <ul>에 적용하십시오.

또한 가로 상자의 경우에도 링크를 나란히 표시하려면 [변환하지 않고 정상적으로 읽음] 태그에 <li> 태그를 사용하십시오.

<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>​ 

난 그냥 웹킷 당신이이 같은 태그의 다른 요소 변환을 추가 할 수 있습니다 변환 추가 한 :

여기에 전체 코드입니다.

또한 <a> 태그의 속성은 position:absolute;이며 링크가 제대로 표시되도록하려면이 태그를 제거해야합니다.

는 여기에 내가 사용한 최종 CSS입니다 :

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; 
}​ 

-webkit-transform: translate(0px, 120px)의 120 픽셀이 다른 레이아웃 변경과 수평으로 목록을 변환 귀하의 CSS에서 사용자의 필요에 따라 설정해야합니다.

UPDATE : 나는 당신이 당신의 요소를 회전하고 또한 적절한 배치에 대한 margin-left을 설정하는 방법에 대한 원점을 설정 할 수 -webkit-transform-origin 속성을 사용하여 코드를 업데이트 한. 원하는만큼 많은 수의 <li> 요소에 대해 효과적으로 작동합니다. 아래 링크에서 새 코드를 확인할 수 있습니다.

은 작업 코드를 확인 함 : // www가이 하나의 HTTP를 확인하십시오 : http://jsfiddle.net/shubhanshumishra/qhS6r/