如何在css3中使高度和寬度div相同？

Question

CSS代碼

div{
    width:50px;
    height:50px;
    background:red;
    border-radius:50px;
}
div:hover{
    width:100px;
    height:100px;
    transition:0.4s;
    -moz-transition:0.4s;
    -ms-transition:0.4s;
    -o-transition:0.4s;
    -webkit-transition:0.4s;
}

html代碼

<div>

我喜歡以相同的高度和寬度進行擴展，不僅要增加右側和底部的寬度。

Answer 1

除了增加width和height您還可以使用CSS3轉換scale() div，例如

http://codepen.io/anon/pen/oXQGyO

div {
    width:50px;
    height:50px;
    background:red;
    border-radius:50px;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    transform-origin: 0 0;
}

div:hover {
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    transform: scale(2);

    -webkit-transition:0.4s;
    -moz-transition:0.4s;
    transition:0.4s;
}