2011-03-22 4 views
8

문제가 있습니다. 나는 div를 45도 회전시키고있다. 그런 다음 새로운 Y 축의 축척을 변경하려고합니다. http://jsfiddle.net/P37g5/2/ - 이제 Y 축은 45 도가 아닙니다. 내가 제대로 질문을 이해하지만, 당신이 변환의 순서를 변경하는 경우, 귀하의 div 정규 Y 축을 따라 조정됩니다회전 후 스케일 변환

답변

2

이 같은 개체를 래핑 할 수 있습니다

CSS

span { 
    margin: 50px 0 0 50px; 
    float: left; 
    width: 28px; 
    height: 28px; 
    background: rgba(240,240,240,1); 
    border-top: 1px solid black; 
    border-right: 1px solid black; 
    -moz-transform: rotate(45deg); 
    -webkit-transform: rotate(45deg); 
} 
div{ 
    -moz-transform:scale(1, 5); 
    -webkit-transform:scale(1, 5); 
} 

HTML

<div> 
    <span></span> 
</div> 

(View on jsFiddle)

15

미안 확실하지 :

div { 
    margin: 50px 0 0 50px; 
    float: left; 
    width: 28px; 
    height: 28px; 
    background: rgba(240,240,240,1); 
    border-top: 1px solid black; 
    border-right: 1px solid black; 
    -moz-transform: scale(1, 1.5) rotate(45deg); 
    -webkit-transform: scale(1, 1.5) rotate(45deg); 
} 

편집 :From w3.org : 만약 변환 목록이 제공되면, 순 효과는 각 변환이 제공된 순서대로 개별적으로 지정된 것처럼 작용합니다.

관련 문제