css3 - 부모 높이에 올바르게 영향을 미치는 CSS의 회전 요소

90도 회전한다고 가정하면 텍스트가 아닌 요소의 경우에도 가능하지만 CSS의 많은 흥미로운 것들과 마찬가지로 약간 교활한 작업이 필요합니다. 내 솔루션은 CSS 2 사양에 따라 기술적으로 정의되지 않은 동작을 호출하므로 Chrome, Firefox, Safari 및 Edge에서 작동하는지 테스트하고 확인했지만 앞으로는 중단되지 않을 것이라고 약속 할 수 없습니다. 브라우저 출시.

빠른 답변

.element-to-rotate 를 회전시키려는 HTML을 이와 같이 제공 ...

<div id="container">
  <something class="element-to-rotate">bla bla bla</something>
</div>

... 회전하려는 요소 주위에2래퍼 요소 소개 :

<div id="container">
  <div class="rotation-wrapper-outer">
    <div class="rotation-wrapper-inner">
      <something class="element-to-rotate">bla bla bla</something>
    </div>    
  </div>
</div>

... 그리고 다음 CSS를 사용하여 시계 반대 방향으로 회전하십시오 (또는 주석 처리 된 transform 참조).  시계 방향으로 바꾸는 방법) :

.rotation-wrapper-outer {
  display: table;
}
.rotation-wrapper-inner {
  padding: 50% 0;
  height: 0;
}
.element-to-rotate {
  display: block;
  transform-origin: top left;
  /* Note: for a CLOCKWISE rotation, use the commented-out
     transform instead of this one. */
  transform: rotate(-90deg) translate(-100%);
  /* transform: rotate(90deg) translate(0, -100%); */
  margin-top: -50%;
  /* Not vital, but possibly a good idea if the element you're rotating contains
     text and you want a single long vertical line of text and the pre-rotation
     width of your element is small enough that the text wraps: */
  white-space: nowrap;
}

스택 스 니펫 데모

p {
  /* Tweak the visuals of the paragraphs for easier visualiation: */
  background: pink;
  margin: 1px 0;
  border: 1px solid black;
}
.rotation-wrapper-outer {
  display: table;
}
.rotation-wrapper-inner {
  padding: 50% 0;
  height: 0;
}
.element-to-rotate {
  display: block;
  transform-origin: top left;
  /* Note: for a CLOCKWISE rotation, use the commented-out
     transform instead of this one. */
  transform: rotate(-90deg) translate(-100%);
  /* transform: rotate(90deg) translate(0, -100%); */
  margin-top: -50%;
  /* Not vital, but possibly a good idea if the element you're rotating contains
     text and you want a single long vertical line of text and the pre-rotation
     width of your element is small enough that the text wraps: */
  white-space: nowrap;
}

<div id="container">
  <p>Some text</p>
  <p>More text</p>
  <div class="rotation-wrapper-outer">
    <div class="rotation-wrapper-inner">
      <p class="element-to-rotate">Some rotated text</p>
    </div>    
  </div>
  <p>Even more text</p>
  <img src="https://i.stack.imgur.com/ih8Fj.png">
  <div class="rotation-wrapper-outer">
    <div class="rotation-wrapper-inner">
      <img class="element-to-rotate" src="https://i.stack.imgur.com/ih8Fj.png">
    </div>
  </div>
  <img src="https://i.stack.imgur.com/ih8Fj.png">
</div>

어떻게 작동합니까?

위에서 사용했던 주문에 대한 혼란은 합리적이다. 많은 일이 진행되고 있으며 전반적인 전략은 간단하지 않으며 이해하기 위해 CSS 퀴즈에 대한 지식이 필요합니다. 단계별로 살펴 보겠습니다.

우리가 직면 한 문제의 핵심은 transform 를 사용하여 요소에 변환이 적용된다는 것입니다.  CSS 속성은 모두 레이아웃이 이루어진 후에 발생합니다. 즉, transform 사용  요소의 부모 나 다른 요소의 크기 나 위치에는 전혀 영향을 미치지 않습니다. 어떻게 transform 의이 사실을 바꿀 수있는 방법은 절대 없습니다  공장. 따라서 요소를 회전시키는 효과를 만들고 부모의 높이가 회전을 존중하게하려면 다음을 수행해야합니다.

<올>

어떻게 높이가 .element-to-rotate 의 너비와 동일한other요소를 구성하는 경우

.element-to-rotate 에 우리의 변환을 씁니다  1 단계의 요소에 정확하게 오버레이하는 등의 작업을 수행해야합니다.

1 단계의 요소는 .rotation-wrapper-outer . 그러나 어떻게높이를 .element-to-rotate 와 동일하게 만들 수 있습니까? 폭?

이 전략의 핵심 요소는 padding: 50% 0 입니다.   .rotation-wrapper-inner 에서 . 이 익스플로잇은 padding 사양의 편심적인 세부 사항입니다. : padding-top 의 경우에도 패딩 비율  그리고 padding-bottom 요소 컨테이너 너비의 백분율로 정의됩니다. 이를 통해 다음 2 단계 트릭을 수행 할 수 있습니다.

<올>

우리는 display: table 를 설정   .rotation-wrapper-outer 에서. 이로 인해 너비에 맞게 너비가 줄어들어 너비가 내용물의 고유 너비를 기준으로, 즉 .element-to-rotate 의 고유 너비를 기반으로 설정됩니다. . (지원 브라우저에서 width: max-content 를 사용하여이를보다 깨끗하게 달성 할 수 있습니다 , 그러나 2017 년 12 월 기준, max-content  여전히 Edge에서 지원되지 않습니다.)

우리는 height 를 설정  와이즈 비츠  0으로 설정 한 다음 패딩을 .rotation-wrapper-inner 로 설정하십시오.  (즉, 상단 50 % 및 하단 50 %). 이것은 부모의 너비의 100 %에 해당하는 수직 공간을 차지하게합니다 .1 단계의 트릭을 통해 50% 0 의 너비와 같습니다 .

다음으로, 남아있는 것은 자식 요소의 실제 회전 및 위치 지정을 수행하는 것입니다. 당연히 .element-to-rotate  회전합니까? 우리는 transform: rotate(-90deg) 를 사용합니다  회전 된 요소의 왼쪽 상단 모서리에서 회전이 발생하도록하여 회전 된 요소가 그려진 요소 바로 위를 떠나기 때문에 추후 번역을 쉽게 추론 할 수 있습니다. 그런 다음 transform-origin: top left; 를 사용할 수 있습니다  사전 회전 너비와 같은 거리만큼 요소를 아래쪽으로 드래그합니다.

우리는 여전히 translate(-100%) 에서 50 % 상단 패딩을 상쇄해야하기 때문에 위치를 올바르게 잡지 못합니다. . 우리는 .rotation-wrapper-outer 를 보장함으로써 그것을 달성  와이즈 비즈  (여백이 제대로 작동하도록) -50 % .element-to-rotate 적용  -백분율 여백은 부모 요소의 너비를 기준으로또한정의됩니다.

그게 다야!

이것이 왜 완전 규격을 준수하지 않습니까?

사양 (볼딩 광산)의 퍼센트 패딩 및 여백 정의에서 다음 참고 사항으로 인해 :

와이즈 비즈 내부 래퍼 요소의 패딩을 컨테이너 너비와 관련하여 자식 너비에 의존하게 만드는 전체 트릭이 바뀌 었 으므로이 조건에 부딪 히고 정의되지 않은 동작이 발생합니다. display: block 변경과 같이 내가 시도한 접근 방식을 수정하는 것처럼 보이는 스펙 호환 조정과 달리 현재 4 개의 주요 브라우저 모두에서 작동합니다.   margin-top 의 형제가되기 위해  부모 대신에.

안타깝게도 (?) 이것은 요소를 회전하더라도 여전히 특정 너비와 높이를 가지고 있지만 회전 후에도 변경되지 않는 방식입니다. 시각적으로 변경하지만 물건을 회전 할 때 크기를 변경하는 보이지 않는 줄 바꿈 상자가 없습니다.

90 ° 미만으로 회전한다고 상상해보십시오 (예 :

The percentage is calculated with respect to thewidthof the generated box's containing block, even for 'padding-top' and 'padding-bottom'.If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1.

) ) : 회전하는 객체의 원래 크기와 실제 회전 값을 기반으로하여 치수가 불명확 한 보이지 않는 상자를 소개해야합니다.

갑자기, 당신은 .rotation-wrapper-inner 를 가지고 있지 않습니다  그리고 .element-to-rotate  당신이 회전 한 개체의,하지만 당신은 또한 transform: rotate(45deg)  그리고 width  주변의 "보이지 않는 상자"의 이 객체의 외부 너비를 요청한다고 상상해보십시오. 무엇을 반환합니까? 물체의 너비 또는 새 상자? 우리는 어떻게 두 가지를 구별합니까?

따라서이 동작을 수정하기 위해 작성할 수있는 CSS가 없습니다 (또는 "자동화"해야합니다). 물론 부모 컨테이너의 크기를 직접 늘리거나 JavaScript를 작성하여 처리 할 수 ​​있습니다.

(확실히 height 를 사용해보십시오.  앞에서 언급 한 사각형을 얻으려면)

사양에 설명 된대로 :

와이즈 비즈

이것은 손으로 직접 만들지 않는 한 변형하려는 객체를 둘러싼 내용이 변경되지 않음을 의미합니다.

객체를 변형 할 때 고려해야 할 유일한 것은 오버 플로우 영역입니다 :

와이즈 비즈

자세한 내용은이 jsfiddle을 참조하십시오.

width 를 사용하여이 상황을 객체 오프셋과 비교하는 것이 실제로 좋습니다.  -개체를 움직이더라도 (예) 주변 콘텐츠는 변경되지 않습니다.

JavaScript를 사용하여이 문제를 처리하려면이 질문을 살펴보십시오.

height 에 백분율 사용  및 컨텐츠를 푸시하기위한 의사 요소를 포함한다. JSFiddle에서 의사 요소를 빨간색으로 표시하여 표시하면 텍스트의 이동을 보정해야하지만 그 방법이 좋습니다.

element.getBoundingClientRect

 
In the HTML namespace, the transform property does not affect the flow of the content surrounding the transformed element.

http://jsfiddle.net/MTyFP/7/

이 솔루션의 작성은 여기에서 찾을 수 있습니다 : http://kizu.ru/en/fun/rotated-text/

G-Cyr의 의견에 따르면,

(...) the extent of the overflow area takes into account transformed elements. This behavior issimilar towhat happens when elements are offset viarelative positioning.

에 대한 현재 지원  괜찮은 것 이상입니다. 간단한 회전과 결합하여 원하는 정확한 결과를 얻을 수 있습니다. 아래 예를 참조하십시오.

position: relative

padding

다른 답변에서 업데이트 된 버전을 참조하십시오. 이 답변은 더 이상 유효하지 않으며 더 이상 작동하지 않습니다. 역사적인 이유로 여기에 남겨 두겠습니다.

<시간>

이 질문은 꽤 오래되었지만 현재 .statusColumn { position: relative; border: 1px solid #ccc; padding: 2px; margin: 2px; width: 200px; } .statusColumn i, .statusColumn b, .statusColumn em, .statusColumn strong { writing-mode: tb-rl; white-space: nowrap; display: inline-block; overflow: visible; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform: rotate(-90deg); /* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */ -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; /* Should be unset in IE9+ I think. */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); } .statusColumn b:before{ content:''; padding:50% 0; display:block; background:red; position:relative; top:20px } 를 지원합니다.  객체와 그 <div class="container"> <div class="statusColumn"><span>Normal</span></div> <div class="statusColumn"><a>Normal</a></div> <div class="statusColumn"><b>Rotated</b></div> <div class="statusColumn"><abbr>Normal</abbr></div> </div>  그리고 writing-mode  이 깔끔한 방법을 .statusColumn { position: relative; border: 1px solid #ccc; padding: 2px; margin: 2px; width: 200px; } .statusColumn i, .statusColumn b, .statusColumn em, .statusColumn strong { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; display: inline-block; overflow: visible; } 와 함께 사용할 수있는 기능과 결합 된 값 내 솔루션도 언급해야한다고 생각합니다.

여기를 참조하십시오. (Chrome 42, FF 33&37에서 테스트되었습니다.)

<div class="container"> <div class="statusColumn"><span>Normal</span></div> <div class="statusColumn"><a>Normal</a></div> <div class="statusColumn"><b>Rotated</b></div> <div class="statusColumn"><abbr>Normal</abbr></div> </div>  요소의 실제상자너비와 높이를 계산합니다. 간단히 말해서 모든 요소를 ​​반복하고 최소 키를 자녀의 실제 상자 높이로 설정할 수 있습니다.

.getBoundingClientRect()

(몇 가지 수정을 통해 자식을 반복하고 가장 큰 자식을 찾고 부모의 키를 가장 큰 자식으로 설정할 수 있습니다. 그러나 예제를보다 간단하게 만들기로 결정했습니다. 패딩을 추가 할 수도 있습니다. 원하는 경우 부모를 키로 높이거나 관련 width 를 사용할 수 있습니다  CSS의 가치.)

하지만 height 를 추가했음을 참고하십시오.  그리고 transform  보다 유연하고 정확한 위치 지정을 위해 CSS에 추가하십시오.

getBoundingClientRect

$(".statusColumn").each(function() { var $this = $(this), child = $this.children(":first"); $this.css("minHeight", function() { return child[0].getBoundingClientRect().height; }); });