Quy mô chuyển đổi CSS, không chia tỷ lệ phần tử con

Question

Nếu tôi có một div với một vài phần tử con và nó đang được chuyển đổi css. Tôi đã có một phần tử con mà tôi không muốn mở rộng quy mô

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

này có thể được thực hiện với chỉ css? Không thay đổi html hoặc sử dụng js.

Answer 1

Rất tiếc, điều này là không thể.

Bạn khoảng có hai lựa chọn khác mặc dù:

1. Scale tất cả các yếu tố khác, bao gồm một trong những bạn không muốn mở rộng (nhưng điều này sẽ không quy mô container).
2. Quy mô vùng chứa và quy mô lại thành phần bạn không muốn mở rộng (nhưng điều này có thể làm cho nó trông mờ).

Ví dụ:

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

Tôi e rằng bạn cần phải sử dụng công cụ chọn chi tiết hơn, như thế này #parent > span:not(:last-child). Example.

Answer 3

Chỉ có một webkit lỗi liên quan (có trong Chrome 44) cho phép biến đổi đó không được thiết lập một cách chính xác. Nếu bạn sử dụng phối cảnh css cùng với thu phóng trình duyệt, giá trị z bị thu nhỏ sai bởi hệ số thu phóng của trình duyệt. Nhưng lỗi này rất hiếm.

Answer 4

Tôi đã tìm thấy hack cho Chrome để khắc phục sự cố bị mờ.

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