0

私は CSS3 をテストしており、現在トランジションを使用しようとしています。これは私が取り組んでいるウェブサイトです。一番上の最初の四角形にマウスを合わせると、左に移動します。問題は、最初のマスが移動するため、空きスペースがあり、他のマスがそこに移動していることです。オブジェクトが動いているとき、それらの正方形を静止させたい. そうする方法はありますか？

CSS

.container {
    margin: 0px auto;
    border: 2px;
    width: 545px;
    height: auto;
}

.title {
    margin: 0px auto;
    width: 600px;
    height: auto;
    text-align: center;
}

.elemento1 {
    float: left;
    width: 266;
    height: auto;
}

.elemento2 {
    float: right;
    width: 266;
    height: auto;
}

.foot {
    clear: both;
}

p.padding {
    padding-bottom: 15px;
    padding-top: 15px;
}

.anim {
    -webkit-transition:width 2s, height 2s, -webkit-transform 2s;
}

.anim:hover {
    width:100px;
    height:100px;
    transform: translate(-50px,0px);
    -ms-transform: translate(-50px,0px); /* IE 9 */
    -webkit-transform: translate(-50px,0px); /* Safari and Chrome */
    -o-transform: translate(-50px,0px); /* Opera */
    -moz-transform: translate(-50px,0px); /* Firefox */
}
4

1 に答える 1

3

あなたがする必要があるのは、アニメーションが移動するのに十分な余白をすでに含んでいるラッピング要素にアニメーション化された要素を配置することです。そうすれば、隣人にぶつかるのではなく、ラッピング要素の内側を動き回ります。

于 2013-01-31T22:36:55.160 に答える