CSS 규모를 변환하고 자식 요소를 축척하지 마십시오.

Question

몇 개의 하위 요소가있는 div가 있고 CSS 변환 크기가 조정됩니다. 나는

#parent{ 
 
    -webkit-transform: scale(.5); 
 
} 
 
    
 
span:last-child{ 
 
    -webkit-transform: Something to ignore the parent scale; 
 
}

<div id="parent"> 
 
    <span>Child 1</span> 
 
    <span>Child 2</span> 
 
    <span>Child 3 (Don't Scale Me)</span> 
 
</div>

이 만 CSS를 함께 할 수있는 확장하지 않으려는 하나 개의 자식 요소를 가지고있다? html을 변경하거나 js를 사용하지 않고.

Answer 1

불행히도 이것은 불가능합니다.

당신은 약하지만 다른 두 가지 옵션이 있습니다 : 당신이 확장하지 않는 한 (그러나 이것은 컨테이너를 확장하지 않습니다) 제외

1. 스케일 다른 모든 요소를,.
2. 컨테이너의 배율을 조정하고 배율을 조정하지 않으려는 요소의 배율을 조정하십시오 (하지만 이것이 흐릿하게 보일 수 있습니다).

예 :

// Example 1. 
span:not(:last-child) { 
    display: inline-block; /* You can't scale inline elements */ 
    transform: scale(2); 
} 

// Example 2. 
#parent{ 
    transform: scale(.5); 
} 

span:last-child{ 
    transform: scale(2); 
} 

Answer 2

더 자세한 선택자 (예 : #parent > span:not(:last-child))를 사용해야합니다. Example.

Answer 3

변환 설정이 정확하지 않는 것을 허용 (크롬 44에서 발견) 하나만 웹킷 관한 버그가있다. 브라우저 확대와 함께 css-perspective를 사용하면 z 값이 브라우저 확대/축소 요인에 의해 잘못 스케일됩니다. 그러나이 버그는 매우 드뭅니다.

Answer 4

크롬이 흐린 문제를 해결하기 위해 hack을 찾았습니다.

#parent { transform: scale(5);} 
#child { transform: scale(0.2) translate3d(0, 0, 0);}