Làm thế nào để lấp đầy khoảng trống trong khi quy mô

Question

Làm thế nào có thể lấp đầy khoảng trống ở phía dưới trong khi sử dụng -webkit-transform:

Có một khoảng cách khi div trở nhỏ. không có bất kỳ cơ thể biết làm thế nào để khắc phục những lỗ hổng

đây là mã

<div id="popUp"> 
    <div id="trans"> 
     <h1>hover me</h1> 
    </div> 
    <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate</p> 
</div> 

CSS

#popUp{ 
    height: auto; 
    width:400px; 
    background: #EEE;  
} 
#trans{ 
    width:100%; 
    height:200px; 
    background: yellow; 

    -moz-transition: all 0.5s; 
    -o-transition: all 0.5s; 
    -webkit-transition: all 0.5s; 
    transition: all 0.5s; 

    -webkit-transform-origin: left top 0; 
     -moz-transform-origin: left top 0; 
     -o-transform-origin: left top 0; 
     -ms-transform-origin: left top 0; 
      transform-origin: left top 0; 
} 
#trans:hover{ 
    -moz-transform: scale(.5); 
    -ms-transform: scale(.5); 
    -o-transform: scale(.5); 
    -webkit-transform: scale(.5); 
    transform: scale(.5) 
} 
h1{ 
    text-align: center; 
} 

DEMO http://jsfiddle.net/sweetmaanu/XpJEQ/3/

không thể tìm thấy một giải pháp thích hợp: (

Hãy giúp tôi nếu bạn biết giải pháp. Cảm ơn trước (Y)

Answer 1

Tôi đã hơi đổi mã ban đầu của bạn như sau (không có khoảng cách giữa văn bản và hình chữ nhật màu vàng trên transform):

#popUp{ 
    height: 300px; 
    width:400px; 
    background: #EEE; 

    -moz-transition: all 0.5s; 
    -o-transition: all 0.5s; 
    -webkit-transition: all 0.5s; 
    transition: all 0.5s; 

    -webkit-transform-origin: left top 0; 
    -moz-transform-origin: left top 0; 
    -o-transform-origin: left top 0; 
    -ms-transform-origin: left top 0; 
     transform-origin: left top 0; 
} 
#popUp:hover{ 
    -moz-transform: scale(.5); 
    -ms-transform: scale(.5); 
    -o-transform: scale(.5); 
    -webkit-transform: scale(.5); 
    transform: scale(.5) 
} 
#trans{ 
    width:100%; 
    height:200px; 
    background: yellow; 
} 

h1{ 
    text-align: center; 
} 

Nó phù hợp với yêu cầu ban đầu của loại bỏ khoảng cách đó . Nếu có bất kỳ yêu cầu bổ sung nào thì mã có thể được sửa đổi tương ứng.

Answer 2

CSS3 transformscale2d sẽ không gây ra việc định vị lại các yếu tố xung quanh nó. Nếu bạn muốn văn bản di chuyển, bạn cần phải thay đổi height và width thực tế của phần tử này.

Answer 3

Giải pháp duy nhất tôi có thể nghĩ ra là xóa phần tử khỏi luồng DOM (đặt cha mẹ thành position: relative, sau đó định vị hoàn toàn phần tử) và tạo ảnh động padding-top của phần tử tiếp theo. (Tiền tố nhà cung cấp trừ) http://jsfiddle.net/XpJEQ/7/

CSS::

Demo

#popUp { 
    background: #EEE; 
    position: relative; 
    width: 400px; 
    max-height: 300px; 
} 
#trans { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 200px; 
    background: yellow; 
    transition: all 0.5s; 
    transform-origin: left top 0; 
} 
#trans:hover { transform: scale(.5); } 
#trans + * { 
    padding-top: 210px; 
    transition: all 0.5s; 
} 
#trans:hover + * { padding-top: 110px; } 
h1 { text-align: center; } 

HTML:

<div id="popUp"> 
    <div id="trans"> 
     <h1>hover me</h1> 
    </div> 
    <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate</p> 
</div>