Mở rộng div từ giữa thay vì chỉ trên cùng và bên trái bằng cách sử dụng CSS

Question

Tôi không chắc liệu điều này có khả thi hay không, nhưng tôi nghĩ nó sẽ tuyệt vời khi sử dụng các biến đổi CSS để tạo hiệu ứng trong đó div mở rộng từ trung tâm chiều cao và chiều rộng, thay vì chỉ từ góc trên bên trái.

Ví dụ, nếu tôi có (demo)

<div id="square"></div> 

và (tiền tố nhà cung cấp bỏ qua cho ngắn gọn)

#square { 
    width: 10px; 
    height: 10px; 
    background: blue; 
    transition: width 1s, height 1s; 
} 
#square:hover { 
    width: 100px; 
    height: 100px; 
} 

On di chuột, điều này sẽ mở rộng hình vuông bên phải và xuống 100px. Tôi muốn mở rộng từ giữa.

Tôi biết rằng tôi có thể sử dụng transform: scale(x) (demo), nhưng điều này thực sự không cung cấp cho tôi bố cục "pixel hoàn hảo" (vì nó dựa trên phần trăm) và cũng không ảnh hưởng bố trí xung quanh (làm cho các yếu tố khác trong luồng tài liệu điều chỉnh theo kích thước của nó). Đây là bản chất tôi muốn làm, ngoại trừ dòng tài liệu bị ảnh hưởng tương ứng.

Có ai biết cách thực hiện điều này mà không có javascript không?

Answer 1

Điều quan trọng là chuyển đổi lề theo công thức. Có một chút "lung lay" đó là gây phiền nhiễu trong quá trình chuyển đổi nếu nó được thả nổi.

EDITED thêm tùy chọn

Lựa chọn 1: Mở rộng trong không gian dành xung quanh nó http://jsfiddle.net/xcWge/14/:

#square { 
    width: 10px; 
    height: 10px; 
    margin: 100px; /*for centering purposes*/ 
    background: blue; 
    -webkit-transition: width 1s, height 1s, margin 1s; 
    -moz-transition: width 1s, height 1s, margin 1s; 
    -ms-transition: width 1s, height 1s, margin 1s; 
    transition: width 1s, height 1s, margin 1s; 
} 
#square:hover { 
    width: 100px; 
    height: 100px; 
    margin: 55px; /* inital margin - ((intial margin - width (or height))/2) */ 
} 

Lựa chọn 2: Mở rộng trên các yếu tố xung quanh nó http://jsfiddle.net/xcWge/18/:

#square { 
    width: 10px; 
    height: 10px; 
    margin: 0; /*for centering purposes*/ 
    background: blue; 
    -webkit-transition: width 1s, height 1s, margin 1s; 
    -moz-transition: width 1s, height 1s, margin 1s; 
    -ms-transition: width 1s, height 1s, margin 1s; 
    transition: width 1s, height 1s, margin 1s; 
} 
#square:hover { 
    width: 110px; 
    height: 110px; 
    margin: -50px; /* inital margin - ((intial margin - width (or height))/2) */ 
} 

Lựa chọn 3: Mở rộng trên các yếu tố trước khi nó trong dòng chảy và chuyển các yếu tố sau khi nó http://jsfiddle.net/xcWge/22/:

#square { 
    width: 10px; 
    height: 10px; 
    margin: 0; 
    position: relative; 
    top: 0; 
    left: 0; 
    background: blue; 
    -webkit-transition: width 1s, height 1s, top 1s, left 1s, margin 1s; 
    -moz-transition: width 1s, height 1s, top 1s, left 1s, margin 1s; 
    -ms-transition: width 1s, height 1s, top 1s, left 1s, margin 1s ; 
    transition: width 1s, height 1s, top 1s, left 1s, margin 1s; 
} 
#square:hover { 
    width: 110px; 
    height: 110px; 
    top: -50px; /* inital top- (intial top-height)/2) */ 
    left: -50px; /* inital left- (intial left-width)/2) */ 
    margin-right: -50px; 
    margin-bottom: -50px; 
} 

Answer 2

Bạn sẽ phải chuyển đổi vị trí của nó để thực hiện việc này, cài đặt nó thành tương đối/tuyệt đối và thay đổi giá trị top khi nó hoạt ảnh.

(chỉnh sửa dựa trên nhận xét)

Thay vì định vị tuyệt đối, bạn có thể thử thực hiện cùng loại điều với lề trên phủ định. Điều đó sẽ giữ nó trong luồng tài liệu. Bằng cách nào đó, mặc dù, bạn cần phải thực sự di chuyển div cũng như animating chiều cao/chiều rộng.

Answer 3

Tôi làm điều này bằng cách điều chỉnh căn chỉnh trên cùng và bên trái khi di chuột qua. Ví dụ: tôi sẽ thêm 50 px vào chiều rộng và di chuyển nó sang trái 25px để cung cấp cho toàn bộ hiệu ứng của nó mở rộng từ giữa.

Answer 4

bạn có thể phải đặt đúng vị trí div và sau đó điều chỉnh vị trí trên cùng bên trái và trên di chuột. jsFiddle example