회전 및 번역

회전 및 번역

---

텍스트 줄을 회전하고 배치하는 데 문제가 있습니다. 이제 작동하는 위치입니다. 회전도 작동하지만 위치 지정을 비활성화 한 경우에만 가능합니다.

CSS :

#rotatedtext {
    transform-origin: left;
    transform: rotate(90deg);
    transform: translate(50%, 50%);
}

html은 일반 텍스트입니다.

---

그 이유는 transform 속성을 두 번 사용하기 때문입니다. 캐스케이드가있는 CSS 규칙으로 인해 마지막 선언이 동일한 특이성을 갖는 경우 승리합니다. 두 변환 선언이 동일한 규칙 세트에 있으므로 이것이 사실입니다.

그것이하는 일은 다음과 같습니다.

1. 텍스트를 90도 회전합니다. 확인.
2. 50 %를 50 %로 번역합니다. 좋습니다. 이것은 1 단계와 동일한 속성이므로이 단계를 수행하고 1 단계를 무시합니다.

참조 http://jsfiddle.net/Lx76Y/을 첫 번째 선언을 덮어 볼 디버거에서 엽니 다

번역이 회전을 덮어 쓰므로 대신 동일한 선언으로 결합해야합니다. http://jsfiddle.net/Lx76Y/1/

이를 위해 공백으로 구분 된 변환 목록을 사용합니다.

#rotatedtext {
    transform-origin: left;
    transform: translate(50%, 50%) rotate(90deg) ;
}

체인에 지정되어 있으므로 변환이 먼저 적용된 다음 그 후에 회전이 적용됩니다.

---

댓글을 달 수 없으므로 여기에 있습니다. @David Storey 답변에 대해.

CSS3 체인의 "실행 순서"에주의하십시오! 규칙은 (왼쪽)에서 (오른쪽)입니다. 왼쪽에서 오른쪽으로.

transformation: translate(0,10%) rotate(25deg);

"회전"작업이 먼저 수행되고 "변환"작업이 다음 / 초에 수행됩니다.

참조 : CSS3 변환 순서 중요 : 맨 오른쪽 작업 먼저

---

원하는대로 'vertical-lr'또는 'vertical-rl'값으로 css 'writing-mode'를 사용할 수 있으므로 그럴 필요가 없습니다.

.item {
  writing-mode: vertical-rl;
}

---

놓칠 수있는 것 : 내 체인 프로젝트에서 공백으로 구분 된 목록은 끝에 공백으로 구분 된 세미콜론이 필요하다는 것이 밝혀졌습니다.

즉, 이것은 작동하지 않습니다.

transform: translate(50%, 50%) rotate(90deg);

그러나 이것은 :

transform: translate(50%, 50%) rotate(90deg) ; //has a space before ";"

참고 URL : https://stackoverflow.com/questions/16795548/rotate-and-translate