如何在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;
}