【CSS】 transformプロパティ：要素の表示位置を移動させるtranslate

CSS3 のtransformプロパティはFlashやJavaScriptを使わずに要素をアニメーションさせたりする視覚的および相互作用の効果を豊富に提供しています。

その中でtranslate()関数は、基本的にX軸とY軸に沿って指定された距離だけ要素を移動させる際に使います。

基本コーディングは特に複雑ではありません。

transform：translate(x, y)、translateX()、translateY()、translateZ()、translate3d()などの関数で移動距離を指定します。

translate()構文

下記のように要素を移動させるためにX軸およびY軸に沿って、要素の移動距離を示すxyのパラメータを指定します。

transform:translate(200px,0);

 div.sample{
　　height:100px;
　　width: 100px;
　　background:#d6d4d4;
　　border-radius:50%;
　　box-shadow:inset 0 2px 45px #2e2d2d;
　　}
 
 div.sample:hover {
　　transform:translate(200px,0);
　　-webkit-transform:translate(200px,0);
　　-moz-transform:translate(200px,0);
　　-ms-transform:translate(200px,0);
　　-o-transform:translate(200px,0);
　　}

下記の円形にマウスオーバーすると右に200px移動することになります。

translate()をリセットしたい場合、「transform: none;」を指定します。

また、transform: translate()とは別途に「position:absolute」を使って要素をtopとleftで移動させる方法もありますが、transform: translate()と比べどっちがいいのかは環境によるみたいです。

要素の中央寄せの指定

[CSS]　translate(-50%,-50%);

 .parent{
　　position:relative;
　　}
 .child{
　　position:absolute;
　　top:50%;
　　left:50%;
　　transform: translate(-50%,-50%);
　　background-color:#666;
　　}