css显示中心变换

css显示中心变换,css,transform,Css,Transform,有人知道如何从中间向外css转换16px乘16px的imgdisplay:none HTML <center> <br> <div class="t"></div> </center> JS .t { height: 0px; width: 0px; background: green; display: block; } .a { height: 16px; width: 1

有人知道如何从中间向外css转换16px乘16px的img
display:none

HTML

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

.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;
    }
setTimeout(function(){$('.t').addClass('a');},1000);
我现在看到的是从中心水平方向看,但从垂直方向看,似乎是从顶部看


顺便说一句:在这种情况下,我不能使用Jquery scale

您可以将其包装在一个容器中,然后像这样绝对定位容器:

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

.集装箱{
位置:绝对位置;
最高:50%;
左:50%;
裕度:-8px-8px 0;
}
t{
高度:0px;
宽度:0px;
背景:绿色;
显示:块;
}
.a{
高度:16px;
宽度:16px;
-webkit变换:旋转(0度)比例(2);
-moz变换:旋转(0度)比例(2);
-o变换:旋转(0度)比例(2);
-webkit转换持续时间:5s;/*Safari*/
过渡时间:5s;
变换原点:中心;
}

已解决:还必须使用“平移”将其移动到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;
    }

为什么要包含旋转(0)?另外,不需要使用containerAll,我添加的是容器HTML/CSS,其余代码来自OP。