CSS 변환이 인라인 요소에서 작동하지 않습니다.

CSS 변환이 인라인 요소에서 작동하지 않습니다.

---

E단어에서 문자를 미러링하고 싶었 기 WEBLOG때문에 CSS transform 속성을 사용했지만 텍스트를 범위 안에 감싸면 작동하지 않지만 assing display: inline-block;또는display: block;

그렇다면 변환은 인라인 요소에 적용되지 않습니까?

예 1 (변환 실패)

<h1>W<span>E</span>BLOG</h1>

h1 span {
    transform:rotate(7deg);
    -ms-transform:rotate(7deg); /* IE 9 */
    -moz-transform:rotate(7deg); /* Firefox */
    -webkit-transform:rotate(7deg); /* Safari and Chrome */
    -o-transform:rotate(7deg); /* Opera */
}

예 2 (사용되는 경우 작동display: block또는display: inline-block)

---

변형 가능한 요소 아래 의 공식 W3 사양 에서 답변했습니다 .

레이아웃이 블록 수준 또는 원자 인라인 수준 요소 인 CSS 상자 모델에 의해 관리 되거나 'display'속성이 'table-row', 'table-row-group', 'table-로 계산되는 요소 header-group ','table-footer-group ','table-cell '또는'table-caption '[CSS21]

---

업데이트 된 버전의 사양 은 다음과 같습니다.

변형 가능한 요소는 다음 범주 중 하나의 요소입니다.

• 대체되지 않은 인라인 상자 , 테이블 열 상자 및 테이블 열 그룹 상자 [CSS2]를 제외하고 레이아웃이 CSS 상자 모델에 의해 제어되는 모든 요소 ,

• 모든 SVG 페인트 서버 요소, clipPath 요소 및 SVG 렌더링 가능 요소 (텍스트 콘텐츠 요소 [SVG2]의 하위 요소 제외).

우리는뿐만 모든 점에 유의해야 inline요소를 변환 할 수 없지만 단지 대체되지 않은 인라인 요소에 따라서는 인라인 대체 요소가 변형 될 수있다.

그래서 기본적으로 우리가 변환 적용 할 수 있습니다 img, canvas그들을 만드는 필요없이, 등 inline-block또는block

var all = document.querySelectorAll('.replaced');

for(var i=0;i<all.length;i++) {
 console.log(window.getComputedStyle(all[i],null).getPropertyValue("display"));
}

canvas {
  background:red;
}

.replaced {
  transform:rotate(20deg);
}

<img src="https://picsum.photos/200/200?image=1069" class="replaced">
<canvas class="replaced"></canvas>

대체 된 요소에 대한 자세한 정보 :

https://html.spec.whatwg.org/multipage/rendering.html#replaced-elements

https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element

대체되지 않은 인라인 요소는 무엇입니까?

참고 URL : https://stackoverflow.com/questions/14883250/css-transform-doesnt-work-on-inline-elements