(html и css) как при наведении равномерно увиличить блок? (через : hover) !

(html)
<div class="test"></div>
(css)

.test {
background: red;
-webkit-transition: all 0.5s ease;; -moz-transition: all 0.5s ease;; -o-transition: all 0.5s ease;; transition: all 0.5s ease;
}

.test:hover {
-webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.0);
}

с "transition"