css - 调整 css 微调器的大小

Question

我正在使用来自 http://cssload.net/ 的 css3 微调器我想知道如何使用 px em 或 % 通过更改 #floatingBarsG 上的高度和宽度来放大或缩小它。如果我将大小设置为高 10px 和宽 10px，图标就会变形。有什么建议吗？

这是一个有效的 js fiddle 示例 http://jsfiddle.net/PWLzb/8/

这是html

<div id="floatingBarsG" style="">
    <div id="rotateG_01" class="blockG"></div>
    <div id="rotateG_02" class="blockG"></div>
    <div id="rotateG_03" class="blockG"></div>
    <div id="rotateG_04" class="blockG"></div>
    <div id="rotateG_05" class="blockG"></div>
    <div id="rotateG_06" class="blockG"></div>
    <div id="rotateG_07" class="blockG"></div>
    <div id="rotateG_08" class="blockG"></div>
</div>

和CSS

#floatingBarsG {
    position:relative;
    width:62px;
    height:77px
}
.blockG {
    position:absolute;
    background-color:#FFFFFF;
    width:10px;
    height:24px;
    -webkit-border-radius:8px 8px 0 0;
    -webkit-transform:scale(0.4);
    -webkit-animation-name:fadeG;
    -webkit-animation-duration:0.5599999999999999s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:linear;
    border-radius:8px 8px 0 0;
    transform:scale(0.4);
    animation-name:fadeG;
    animation-duration:0.5599999999999999s;
    animation-iteration-count:infinite;
    animation-direction:linear;
}
#rotateG_01 {
    left:0;
    top:28px;
    -webkit-animation-delay:0.20999999999999996s;
    -webkit-transform:rotate(-90deg);
    animation-delay:0.20999999999999996s;
    transform:rotate(-90deg);
}
#rotateG_02 {
    left:8px;
    top:10px;
    -webkit-animation-delay:0.27999999999999997s;
    -webkit-transform:rotate(-45deg);
    animation-delay:0.27999999999999997s;
    transform:rotate(-45deg);
}
#rotateG_03 {
    left:26px;
    top:3px;
    -webkit-animation-delay:0.35s;
    -webkit-transform:rotate(0deg);
    animation-delay:0.35s;
    transform:rotate(0deg);
}
#rotateG_04 {
    right:8px;
    top:10px;
    -webkit-animation-delay:0.41999999999999993s;
    -webkit-transform:rotate(45deg);
    animation-delay:0.41999999999999993s;
    transform:rotate(45deg);
}
#rotateG_05 {
    right:0;
    top:28px;
    -webkit-animation-delay:0.48999999999999994s;
    -webkit-transform:rotate(90deg);
    animation-delay:0.48999999999999994s;
    transform:rotate(90deg);
}
#rotateG_06 {
    right:8px;
    bottom:7px;
    -webkit-animation-delay:0.5599999999999999s;
    -webkit-transform:rotate(135deg);
    animation-delay:0.5599999999999999s;
    transform:rotate(135deg);
}
#rotateG_07 {
    bottom:0;
    left:26px;
    -webkit-animation-delay:0.63s;
    -webkit-transform:rotate(180deg);
    animation-delay:0.63s;
    transform:rotate(180deg);
}
#rotateG_08 {
    left:8px;
    bottom:7px;
    -webkit-animation-delay:0.7s;
    -webkit-transform:rotate(-135deg);
    animation-delay:0.7s;
    transform:rotate(-135deg);
}
@-webkit-keyframes fadeG {
    0% {
        background-color:#000000
    }
    100% {
        background-color:#FFFFFF
    }
}
@keyframes fadeG {
    0% {
        background-color:#000000
    }
    100% {
        background-color:#FFFFFF
    }
}

Answer 1

这可以通过 CSS 缩放转换非常轻松地完成:

#floatingBarsG {
    -webkit-transform:scale(2);
    -webkit-transform-origin:top left;
    -moz-transform:scale(2);
    -moz-transform-origin:top left;
    -ms-transform:scale(2);
    -ms-transform-origin:top left;
    -o-transform:scale(2);
    -o-transform-origin:top left;
    transform:scale(2);
    transform-origin:top left;
}

Demo .

发布此答案后 8 年的编辑:如今，不再需要所有这些前缀，因此只需使用以下内容就足够了:

#floatingBarsG {
    transform:scale(2);
    transform-origin:top left;
}