0

2つのdivを持つローディングバーを作成しようとしています。背景バーは灰色で、前景は緑色になります。背景のバー（.bar）は問題ありませんが、緑色のバー（.load）は灰色のバーの中央に配置されています。左揃えにする必要があります。私はこれに少し慣れていないので、何かを見落としているかもしれません、どんな助けでもありがたいです！

スタイリングについてさらに情報が必要な場合は 、ホームページにあるサイトhttp://keithtmock.com/をチェックしてください。

CSSのプロパティは次のとおりです

.bar
{
width:820px;
height:30px;
margin-top:30px;
background-color:gray;
}
.load
{
width:820px;
height:30px;
background-color:green;
transform:scale(.5,1);
-ms-transform:scale(.5,1); /* IE 9 */
-moz-transform:scale(.5,1); /* Firefox */
-webkit-transform:scale(.5,1); /* Safari and Chrome */
-o-transform:scale(.5,1); /* Opera */
}

HTML

<div class="bar">
   <div class="load">
   </div>
</div>
4

2 に答える 2

1

これは、変換が相対的に途中から適用され、オブジェクトがその後移動されないために発生します。transform-originこれを修正するために使用します。

-webkit-transform-origin: 0;
-moz-transform-origin: 0;
-ms-transform-origin: 0;
-o-transform-origin: 0;
transform-origin: 0;

詳細については、MDN "transform-origin"を参照してください。

デモ

購入前にお試しください。

于 2013-03-18T23:48:52.877 に答える
0

これが解決策です：

.bar
{
width:820px;
height:30px;
margin-top:30px;
background-color:gray;


}
.load
{
width:820px;
height:30px;
background-color:green;


transform:scale(.5,1);
-ms-transform:scale(.5,1); /* IE 9 */
-moz-transform:scale(.5,1); /* Firefox */
-webkit-transform:scale(.5,1); /* Safari and Chrome */
-o-transform:scale(.5,1); /* Opera */
-webkit-transform-origin: 0;
-moz-transform-origin: 0;
-ms-transform-origin: 0;
-o-transform-origin: 0;
transform-origin: 0;

}
于 2013-03-19T00:02:53.553 に答える