如何从中心点进行webkit过渡高度和宽度变换？

Question

是否可以从中心点缩放（变换）div的大小？我试过但我无法得到结果。

这是代码：

div {
    height: 100px;
    width: 100px;
    -webkit-transition: height, width,left,top, 1s;
    -webkit-transform-origin: 50% 50%;
    background: red;
    position:absolute;
    left:30%; top:30%;
}

div:hover {
    width: 150px;
    height:150px;
    -webkit-transition: height, width, 1s;
    background: red;
}​

jsfiddle