JSFiddle

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

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

BTW：在这种情况下我无法使用Jquery比例

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

Answer 2

您可以将其包装在容器中，然后绝对定位容器，如下所示：

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

css显示中心转换

2 个答案:

JSFiddle