Кто-нибудь знает, как преобразовать css изображение размером 16 пикселей на 16 пикселей 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 в этом случае

Решено: он также должен быть перемещен по x и y с помощью translate

 .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;
    }
  

Вы могли бы обернуть это в контейнер, а затем полностью расположить контейнер следующим образом:

 <div class="container">
    <div class="t"></div>
</div>

.container {
    position:absolute;
    top:50%;
    left:50%;
    margin:-8px -8px 0 0;
}
.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;
}
  

JSFiddle