quy mô chuyển đổi liên quan đến cha mẹ

Question

Tôi đang sử dụng transition:scale(1.2) để ẩn một số div ở góc dưới cùng bên trái của chế độ xem.

cách tiếp cận hiện tại của tôi là mở rộng quy mô từ trung tâm như mong đợi:

Fiddle for 'CURRENTLY'

Tôi muốn mở rộng nó như nếu div sẽ chiếm toàn bộ màn hình:

Fiddle for 'DESIRED'

Điều trên được thực hiện bằng cách mở rộng toàn bộ body. Nhưng thay vì sử dụng một phụ huynh khác, tôi đã tự hỏi nếu có một cách khác để nói cho CSS theo hướng mà quy mô sẽ xảy ra.

Cách sử dụng transition:scale(1.2) như đã thấy trong DESIRED mà không sử dụng div đầy đủ?

Answer 1

Bạn có thể thay đổi nguồn gốc transform-:

Something như thế này nên được gần gũi với những gì bạn đang tìm kiếm:

-webkit-transform-origin: 120% -40%; 

Demo Fiddle

CSS Modified:

#clock { 
    position:fixed; 
    bottom:8%; 
    left:7%; 
    color:#fff; 
    transition:all .8s; 
    -webkit-transition:all .8s; 
    transform-origin: 120% -40%; 
    -webkit-transform-origin: 120% -40%; 
} 

body { 
    overflow:hidden; 
} 

body:hover #clock { 
    -webkit-transform:scale(1.2); 
    transform:scale(1.2); 
    opacity:0; 
} 

---

Chỉnh sửa Vì bạn đang sử dụng vị trí dựa trên phần trăm bên trái/dưới cho đồng hồ, điều này có thể gần hơn với hiệu ứng bạn đang tìm kiếm. Quay trở lại một trung tâm dựa trên biến đổi nguồn gốc và chuyển đổi trái/dưới gần hơn với góc sẽ cung cấp thêm một chút về ảnh hưởng mà nó đang được thu nhỏ từ góc trên bên phải của phụ huynh.

Demo Fiddle 2

CSS Modified:

#clock { 
    position:fixed; 
    bottom:8%; 
    left:7%; 
    color:#fff; 
    transition:all .8s; 
    -webkit-transition:all .8s; 
    transform-origin: center center; 
    -webkit-transform-origin: center center; 
} 

body { 
    overflow:hidden; 
} 
body:hover #clock { 
    -webkit-transform: scale(1.2); 
    transform: scale(1.2); 
    bottom: 1%; 
    left: 0%; 
    opacity:0; 
}