css显示中心变换
有人知道如何从中间向外css转换16px乘16px的imgcss显示中心变换,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
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。