회전 및 번역

90

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

CSS :

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

html은 일반 텍스트입니다.

css webkit transform css-transforms

— 세라
소스

161

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

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

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

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

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

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

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

— 데이비드 스토어이
소스

23

나는 연쇄가 명심해야 할 매우 중요하다는 것을 발견했습니다. - A A 회전에 의해 다음 평행 이동을 비교 jsfiddle.net/Mrjm8/3 - - 번역 뒤에 회전에 jsfiddle.net/Mrjm8/2

— 누가 복음

CSS 대신 HTML로 작성할 때 어떻게 작동합니까?

— JakeTheSnake 2015 년

2

@JakeTheSnake 그렇지 않습니다. CSS 변환은 CSS 기능입니다.

— Stijn de Witt

2

우와, 고마워요. 많은 블로그와 사양에서 결코 언급하지 않는 핵심 요소 인 연결 측면을 대담하게 표시 해야합니다 .

— cgatian

@Luke 지적 해 주셔서 감사합니다. 순서가 정말 중요합니다!

— Yami Odymel 20.01.21

12

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

CSS3 체인의 "실행 순서"에주의하십시오! 순서는 왼쪽에서 오른쪽이 아니라 오른쪽에서 왼쪽입니다.

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

rotate작업은 먼저 다음을 수행한다 translate.

— darthRods
소스

4

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

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

— Biojazzard
소스

2

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

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

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

그러나 이것은 :

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

— 브라이언 코일
소스