[css] 부모의 높이에 올바르게 영향을 미치는 CSS의 회전 된 요소

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

짧은 답변

이와 같은 HTML이 주어지면 회전하려는 위치 .element-to-rotate…

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

… 회전하려는 요소 주위에 두 개의 래퍼 요소를 소개 합니다.

<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 퀴즈에 대한 지식이 필요합니다. 단계별로 살펴 보겠습니다.

우리가 직면 한 문제의 핵심은 transformCSS 속성을 사용하여 요소에 적용된 변환이 모두 레이아웃이 발생한 후에 발생 한다는 것입니다. 즉, transform요소를 사용하더라도 부모 또는 다른 요소의 크기 나 위치에는 전혀 영향을주지 않습니다. transform작동 방식에 대한이 사실을 변경할 수있는 방법은 전혀 없습니다 . 따라서 요소를 회전하는 효과를 만들고 부모의 높이가 회전을 고려하도록하려면 다음을 수행해야합니다.

1. 어떻게 든 높이가 너비와 같은 다른 요소를 구성 하십시오..element-to-rotate
2. .element-to-rotate1 단계의 요소에 정확히 오버레이하도록 변환을 작성합니다 .

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

여기서 우리 전략의 핵심 요소는 padding: 50% 0on .rotation-wrapper-inner입니다. 이 익스플로잇 은 스펙의 특이한 세부 사항입니다.paddingpadding-top 및 padding-bottom에 대한 백분율 패딩 은 항상 요소 컨테이너 너비의 백분율로 정의됩니다 . 이를 통해 다음 2 단계 트릭을 수행 할 수 있습니다.

1. 우리는 설정 display: table에서 .rotation-wrapper-outer. 이로 인해 너비 에 맞게 축소 됩니다. 즉, 너비가 콘텐츠의 기본 너비 , 즉 기본 너비를 기반으로 설정됩니다 .element-to-rotate. (브라우저를 지원, 우리는 더 깨끗하게에이를 수 width: max-content, 12 월까지는 2017로 max-content되어 여전히 에지에서 지원되지 않습니다 .)
2. 우리는 설정 height의 .rotation-wrapper-inner다음의 패딩 설정을 0 50% 0(이고, 50 %의 상위 50 % 아래). 이로 인해 부모 너비의 100 %에 해당하는 수직 공간을 차지하게됩니다. 1 단계의 트릭을 통해의 너비와 동일합니다 .element-to-rotate.

다음으로 남은 것은 자식 요소의 실제 회전 및 위치 지정을 수행하는 것입니다. 당연히 transform: rotate(-90deg)회전합니다. 우리 transform-origin: top left;는 회전 된 요소의 왼쪽 상단 모서리 주위에서 회전이 일어나도록하는데, 이것은 회전 된 요소가 다른 방법으로 그려졌을 위치 바로 위에 남겨지기 때문에 후속 변환을 더 쉽게 추론 할 수 있도록합니다. 그런 다음을 사용 translate(-100%)하여 회전 전 너비와 동일한 거리만큼 요소를 아래쪽으로 드래그 할 수 있습니다 .

에서 50 % 상단 패딩을 오프셋해야하기 때문에 여전히 올바른 위치를 얻지 못합니다 .rotation-wrapper-outer. 우리는 그 보장함으로써 그 달성 .element-to-rotate이 display: block(그래서 마진이 제대로 작동합니다) 후 50 % 적용 margin-top비율 마진이 참고 – 또한 부모 요소의 너비를 기준으로 정의합니다.

그리고 그게 다야!

이것이 사양을 완전히 준수하지 않는 이유는 무엇입니까?

때문에의 사양에서 비율 패딩과 마진의 정의에서 다음 주 (굵은 글자 광산) :

백분율은 ‘padding-top’ 및 ‘padding-bottom’의 경우에도 생성 된 상자의 포함 블록 너비 를 기준으로 계산됩니다 . 컨테 이닝 블록의 너비가이 요소에 의존하는 경우 결과 레이아웃은 CSS 2.1에서 정의되지 않습니다.

전체 트릭은 내부 래퍼 요소의 패딩이 자식의 너비에 따라 달라지는 컨테이너의 너비에 상대적이되도록하는 것이므로이 조건에 도달하고 정의되지 않은 동작을 호출합니다. 하지만 현재는 4 개의 주요 브라우저 모두에서 작동합니다. 겉보기에는 사양을 준수 하여 부모 대신 .rotation-wrapper-inner형제로 변경 하는 것과 같이 제가 시도한 접근 방식을 변경하는 것과는 다릅니다 .element-to-rotate.

답변

.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;
}

<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>

.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>

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

transform: rotate(-90deg) translateX(-100%);
transform-origin: top left;

<br>