2017-01-31 5 views
0

私はしようとしています絶対配置されたブロックをブートストラップの列にアニメートします。絶対的なアイテムをブートストラップの列に配置

問題は、ブートストラップCOLはすべて私の絶対的なアイテムが素晴らしいだろうどのような異なる

を持っていますので、別の画面上で固定幅を持っていないということですがあれば、私はに要素を設定することですたとえば、translateX(50%)です。それは、常に私のCOL-XS-4

enter image description here

の中心誰もがこの経験を持っていますになりますか?

私は、変換を使用して

を試してみた:割合またはピクセルに変換します。

@keyframes animation { 
    0% {transform: translateX(-100%) } 
    100% {transform: translateX(0) } 
} 

%はブートストラップの列の幅に基づいていないため、これは機能しません。応答性がなく、すべての画面サイズで、別の場所で終了します。

+1

あなたのコードだ.col-xs-4に水平それを中心に説明しますか? '左:50%; transform:translate(-50%;) 'は' .col-xs-4'の中で水平になるでしょう –

+0

あなたのコードはどこですか?あなたのコードがなければ、私たちは推測しているだけです。 http://stackoverflow.com/help/mcve –

+0

あなたの答えは正しいです! :)あなたはそれの答えを作る気になりますか?コードは非常に擦れているので論理的なことです。私は左の50%を理解しようとしていますが、翻訳では-50%のカウンターを理解しようとしています。 – Notflip

答えて

1

left: 50%; transform: translateX(-50%;)

+0

なぜですか?翻訳(-50%)は何をしますか?ありがとうございます – Notflip

+0

@Notflip https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate http://www.w3schools.com/cssref/css3_pr_transform.asp –

関連する問題