この記事でCSS第3弾になります。

今回はCSS3から策定されたプロパティで移動、回転、縮尺・傾斜を表現することができるtransformのプロパティを紹介していきます。

このtransformのおかげで2Dだけではなく3Dの表現もできるようになりました。またanimationとkeyframeを組み合わせてアニメーションをCSSだけで実装する時にもtransformの移動、回転、縮尺・傾斜をよく使用しています。

今回はそんな便利なtransformの基本的な説明と、transformを使ってよく行う実装を紹介しようと思います。

transformの基本的な説明

移動

移動はtranslate(X値、Y値)、translateX(値)、translateY(値)、translateZ(値)、translate3d(X値, Y値, Z値)で要素の表示をします。

まずはX軸とY軸の移動から設定します。

.start_box{
    transform: translate(0,0);
}
.tx150_box{
    transform: translate(150px,0);
}

続いて、Z軸。

.start_3dbox{
    transform: translateZ(100px);
    border: 1px solid #000;
}

translateのX軸とY軸は単体でも動きますが、Z軸は単体では動きません。そこでtranslateZ()と同じくperspective()を指定すると動くようになります。

回転

回転はrotate(値)、rotateX(値)、rotateY(値)で、単位はdegでdegree（度という意味）の略になります。

まずはrotateX(値)で上から0、45deg、90degとなります。

.rotatex_box{
    transform: rotateX(0deg);
}
.rotatex45_box{
    transform: rotateX(45deg);
}
.rotatex90_box{
    transform: rotateX(90deg);
}

X軸なので、横の軸を起点に回転します。90degの時は要素が見えない状態になります。

続いてrotateY(値)で上から0、45deg、90degとなります。

.rotatey_box{
    transform: rotateY(0deg);
}
.rotatey45_box{
    transform: rotateY(45deg);
}
.rotatey90_box{
    transform: rotateY(90deg);
}

Y軸なので、縦の軸を起点に回転します。90degの時は要素が見えない状態になります。

続いてrotateZ(値)で上から0、45deg、90degとなります。

.rotatez_box{
transform: rotateZ(0deg);
}
.rotatez45_box{
transform: rotateZ(45deg);
}
.rotatez90_box{
transform: rotateZ(90deg);
}

Z軸なので前後の軸を起点に回転します。どの回転でも要素は見えます。

続いてrotate(値)で上から0、45deg、90degとなります。

.rotate_box{
transform: rotate(0deg);
}
.rotate45_box{
transform: rotate(45deg);
}
.rotate90_box{
transform: rotate(90deg);
}

縮尺

縮尺はscale(値)、scale(X軸,Y軸)となります。

.base_box{
transform: scale(1);
}
.base_x150_box{
transform: scale(1.5);
}
.base_x50_box{
transform: scale(.5);
}

X軸とY軸をそれぞれ設定することもできます。

.base_xy_box{
transform: scale(1,1);
}
.base_xy_x150_box{
transform: scale(1,.5);
}
.base_xy_x50_box{
transform: scale(.5,1);
}

応用編

子要素の縦横中央配置

親要素の中の1つの子要素を縦横中央に配置するやり方はいくつかあります。その中でpositionを使う場合transform: translate;を使うと楽に配置できます。

positionで配置する場合、親要素と子要素にそれぞれ下記を設定します。

親要素{
    position: relative;
}
子要素{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

transform: translate(-50%,-50%);を使うまでは下記のような指定をしていました。

子要素{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -子要素のheightの1/2サイズの数値;
    margin-left: -子要素のwidthの1/2サイズの数値;
}

この書き方だと子要素のwidthとheightが決まっていないと設定できないですし、決まっていないのであればjQueryで動的にサイズを取得して半分サイズの計算をして子要素にstyle指定して子要素のサイズが変わるのであればリサイズイベントの設定をして…と超面倒なことをしないといけないです。

ここで勘の鋭い方なら気づくと思いますが、transform: translate(-50%,-50%);の指定している-50%という値は子要素の1/2サイズの数値を指定していることになります。

少しずつ分解していくと、

子要素{
    position: absolute;
    top: 50%;
    left: 50%;
    // transform: translate(-50%,-50%); ここを指定する前の状態
}

親要素の左上を起点として上50%、左50%に配置しています。子要素のサイズは縦横共に150pxで設定しているので、まずは75pxで設定してみます。

続いてtransform: translate(-50%,-50%);を指定します。

まるっきり同じ配置ができました。

どちらも考え方は同じですが、transformを使った方が柔軟で子要素のサイズを気にする必要がありません。なので重宝されるんです。

ホバーアクション

transformは要素をホバーする時にも使えます。

.link{
position: relative;
z-index: 2;
display: block;
width: 300px;
padding: 25px 0;
border: 1px solid #000;
font-size: 16px;
text-align: center;
}
.link:before{
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
background-color: #000;
transform: scale(0,1);
transform-origin: right top;
transition: transform .3s ease;
}
.link:hover{
color: #fff!important;
}
.link:hover:before{
transform: scale(1,1);
transform-origin: left top;
}

hover

上記のホバーのポイントはtransform-originを使用して起点をホバーしている時、ホバーしていない時を切り替えているところ。

下の図で言うと、上がホバーしている時の起点、下がホバーしていない時の起点になってます。

ホバーした時に起点を左上にして左から黒の要素が伸びるようにして、ホバーを外した時に起点を右上に切り替えて黒の要素を縮小させています。

transform-originは初期値は真ん中が起点になってるので、設定しない場合はこちらになります。

hover

CSSアニメーション

CSS3が策定されてからCSSのみでアニメーションが実装できるようになりました。animationプロパティと@keyframesの組み合わせで実装できます。

その際transformのプロパティでアニメーションさせる方が負荷があまりかからないそうなので、意識してtransformのプロパティを設定しています。

まずはこちらの雑な簡易的なオープニングをご覧ください。

扉が開くようなイメージで実装しております。トゥモローゲートだけに…。

まずはanimationプロパティから。

animation: open 3s linear infinite forwards;

animationのプロパティは8個の値を一括で指定できます。8つの内容はanimation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-stateです。1つずつ簡易的に説明すると、

• animation-name（名前）
• animation-duration（時間）
• animation-timing-function（イージング系）
• animation-delay（遅延）
• animation-iteration-count（何回アニメーションする）
• animation-direction（アニメーションの向き）
• animation-fill-mode（アニメーション後のスタイル）
• animation-play-state（実行中か停止中か）

8個全部使うかというとそうでもないし、ぶっちゃけanimation-directionとanimation-play-stateは設定したことがない。

@keyframesは

@keyframes アニメーションの名前{
  0%{
    transform: rotateY(0);
  }
  100%{
    transform: rotateY(90deg);
  }
}

0%がアニメーションの開始時の状態、100%がアニメーションが終了時の状態です。

今回は大まかな設定になっていますが、細かく設定することで勢いをつけたり、アニメーションの途中で一時停止できたりと色んなことが実装可能です。

少し話は逸れましたが、CSSアニメーションにはtransformで設定するのが良いとされているので、紹介させていただきました。

まとめ

transformは他にもmatrix()やmatrix3d()やskew()などがありますが、現状そこまで使っていないので、またの機会に書けるように使い倒していきます。また途中でhoverのアクションを書きましたが、hoverアクションだけをまとめたブログをストックして書いていきます。