html - 如何在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之外，您还可以scale()使用CSS3转换的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;
}