CSS3에서 비스듬히 이미지 번역

Question

css3의 각도로 이미지를 어떻게 변환합니까? 나는 우리가 번역 기능에서 x와 y 좌표를 줄 수 있음을 알고 있지만 한 점에서 방사형으로 여러 이미지를 번역하려고합니다. 그리고 그 점에서 대칭을 원합니다. 그래서 저는 어떤 각도로 번역하려고합니다.

Answer 1

css transform 속성에는 요소 조작을위한 몇 가지 옵션이 있습니다.

당신은 당신이 3 축 (X, Y, Z)의 이미지를 이동할 수 translate 속성을 언급 한 바와 같이, 그러나 않습니다

당신이 각도를 추가 할 경우 transform 당신과 같이, 회전 속성을 사용할 수 있습니다 :

transform: rotate(15deg); 

또한 3 차원 회전과 같은 더 복잡한 회전을 추가 할 수 있습니다 http://www.w3schools.com/cssref/css3_pr_transform.asp

,691 :

transform: rotate3d(x,y,z,angle); /* Defines a 3D rotation */ 

은 자세한 내용은 당신의 transform 속성에 대한 설명서를 확인하실 수 있습니다

Answer 2

당신은 요소를 회전 X 축에서 이동하고, 레벨

div { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: green; 
 
    position: absolute; 
 
    left: 50px; 
 
    top: 50px; 
 
} 
 

 
div:nth-child(1) { 
 
    transform: rotate(20deg) translateX(100px) rotate(-20deg); 
 
} 
 

 
div:nth-child(2) { 
 
    transform: rotate(45deg) translateX(100px) rotate(-45deg); 
 
} 
 

 
div:nth-child(3) { 
 
    transform: rotate(70deg) translateX(100px) rotate(-70deg); 
 
}

<div>20</div> 
 
<div>45</div> 
 
<div>70</div> 
 
<div>base</div>