web-dev-qa-db-ja.com

同じ要素でtranslateXとtranslateYがありますか？

同じ要素にCC変換XとYを適用することは可能ですか？

これを試すと、translateXはtranslateYによってオーバーライドされます。

.something { 
        transform: translateX(-50%);
        transform: translateY(-50%);
}
csscss3css-transforms
41
Evanss

このようなことができます

transform:translate(-50%,-50%);
70
Akshay

あなたの場合、translateプロパティでXとYの両方の翻訳を適用できます：

transform: translate(tx[, ty]) /* one or two <translation-value> values */

[ ソース：MDN ]

たとえば、次のようになります。

.something { 
  transform: translate(-50%,-50%);
}

デモ：

div{
  position:absolute;
  top:50%; left:50%;
  width:100px; height:100px;
  transform: translate(-50%,-50%);
  background:tomato;
}
<div></div>

この回答で述べられているように CSS3で複数の変換を適用する方法？ 同じ宣言で指定することにより、同じ要素に複数の変換を適用できます：

.something { 
  transform: translateX(-50%) translateY(-50%);
}
8
web-tiki

XとYを組み合わせて単一の式に変換できます。

transform: translate(10px, 20px); /* translate X by 10px, y by 20px */

また、一般的に、いくつかのルールが単一のルールに変換されます。

transform: translateX(10px) translateY(20px) scale(1.5) rotate(45deg);
4
joews