CSS3 변환을 글리프에 적용

:before 의사 요소의 아이콘 (글리프)에 CSS 변환을 적용하려고합니다. CSS3 변환을 글리프에 적용

은 궁극적으로 나의 목표는하지만 내가 어떤 을 얻을 :before 의사 요소 내의 문자 모양에서 작동하도록 변환 할 수없는 것, 단순히 "플립"는 transform: scale(-1, 1)의 아이콘이다.

<!DOCTYPE html> <html> <style> .icon { } .icon::before { content: "X"; color: white; font-size: 11pt; transform: scale(5); } </style> <body> <div style = "padding: 1em; background: black; width: 200px; height: 200px"> <div class = "icon"> </div> </div> </body> </html>

링크 바이올린 :이 예에서 http://jsfiddle.net/729yspsp/1/

, 내가 대신 실제 그리 간단한 X 문자를 사용하고의 목적을 위해 여기에
은 간단한 예입니다 데모.

볼 수 있듯이 변형은 글리프에 적용되지 않습니다.

여기서 내가 뭘 잘못하고 있니?

참고 : 현재 Chrome (Chrome 37)의 최신 버전을 사용 중이므로 브라우저 호환성 문제가 아닙니다.

출처

2015-01-02 Siler

CSS Transforms Module Level 1

변형 가능한 요소는, 그 레이아웃 표시 속성 테이블 행 테이블 로우 -을 계산하는 블록 레벨 또는 atomic inline-level element 또는 하나 인 CSS 박스 모델에 의해 지배되는 소자 인 그룹, 표 머리글 그룹, 표 바닥 글 그룹, 표 셀 또는 표 캡션이 포함됩니다.

따라서 transform 속성은 엄격하게 인라인 수준 요소에 영향을 미치지 않습니다.

가짜 요소는 기본적으로 inline입니다.

당신은 설정할 수있는 display¹ 또는 blockinline-block 및 예상대로 작동합니다.

.icon::before { 
    content: "X"; 
    display: inline-block; 
    transform: scale(5, 2); 
    -webkit-transform: scale(5, 2); 
    -moz-transform: scale(5, 2); 
}

Updated Example

하여 그것에게 atomic inline-level box 제조.

출처

2015-01-02 01:37:14

CSS3 변환을 글리프에 적용

답변

관련 문제