css 显示中心中心变换

Question

有谁知道如何通过 CSS 将 16px x 16px img display: none 从中心向外转换？

HTML

<center>
<br>
<div class="t"></div>
</center>

CSS

.t {
    height: 0px;
    width: 0px;
    background: green;
    display: block;
    }

.a {
    height: 16px;
    width: 16px;
    -webkit-transform: rotate(0deg) scale(2);
    -moz-transform: rotate(0deg) scale(2);
    -o-transform: rotate(0deg) scale(2);
    -webkit-transition-duration: 5s; /* Safari */
    transition-duration: 5s;
    transform-origin: center center;
    }

JS

setTimeout(function(){$('.t').addClass('a');},1000);

我现在所拥有的是从中心水平显示，但垂直显示似乎是从顶部显示。

顺便说一句:在这种情况下我无法使用 Jquery scale

Answer 1

已解决:还必须用翻译移动x和y

.container {
    position:absolute;
    top:50%;
    left:50%;
    width: 50%;
    height: 50%;
    border: 1px solid #000;
    }
.t {
    height: 0px;
    width: 0px;
    top: 0px;
    left: 0px;
    background: green;
    position: absolute;
    }

.a {
    height: 16px;
    width: 16px;
    -webkit-transform: scale(2) translateX(-4px) translateY(-4px);
    -moz-transform: scale(2) translateX(-4px) translateY(-4px);
    -o-transform: scale(2) translateX(-4px) translateY(-4px);
    transform-origin:4px 4px;
    -webkit-transition-duration: 1s; /* Safari */
    transition-duration: 1s;
    }