Help us understand the problem. What is going on with this article?

transformについて[html, css]

はじめに

「transformは何ができるのか」
「transformはどんな時に使うのか」
ということについて書いていきたいと思います。

transform自体を使ったことがない人も多いと思いますが、
Webデザインをしていく中で必ず目にすることになると思います。

そんなtransformについてまとめていきたいと思います。

transformについて

transformを使用することによって、デザインに移動、回転、伸縮、傾斜の効果をつけることができます。二次元的な動きだけではなく、三次元的な動きにも対応しています。

transformの種類

transformには4つの関数が用意されています。

  1. translate() 「移動」
  2. rotate() 「回転」
  3. scale() 「伸縮」
  4. skew() 「傾斜」

transformの使い方

それぞれの関数にX,Y,Z,3Dが用意されています。
translateX()のように()の前にX,Y,Z,3Dを記入することでその軸に対して関数を使用することができます。
また、translate(X,Y,Z)のように記入してもそれぞれの軸に対して関数を使用することができます。

index.html
<div class="transform">Transform<div>
style.css
.transform{
    padding: 10px 20px;
    background: #59b1eb;
    text-align: center;
    color: #fff;
    width: 30%;
}

このhtml,cssに対して、transformを使用していきたいと思います。
わかりやすくするために:hover,transitionを使用していきたいと思います。
hoverはカーソルを要素に置いた時に適用されるようにする要素です。
transitionはtransformを適用するにあたり、開始から終了までの時間を決めることができます。

translate

translateは要素に移動の効果を追加することができます。

style.css
.transform{
    padding: 10px 20px;
    background: #59b1eb;
    text-align: center;
    color: #fff;
    width: 30%;
    transition: 1s;
}

.transform:hover{
    transform: translate(20px,20px)
}

.transformtransition: 1s;を追加し
.transform:hover{
transform: translate(20px,20px)
}
を新たに追加しました。
動きを確認してみてください。
X軸方向に20px、Y軸方向に20px動くのが確認できたかと思います。

rotate

rotateは要素に回転の効果を追加することができます。

style.css
.transform:hover{
    transform: rotateX(360deg)
}

rotateを使用する場合pxではなくdegree「度」を表す
degを使用します。
このコードの場合X軸に対して360度回転します。確認してみてください。

style.css
.transform:hover{
    transform: rotateY(360deg)
}

この場合Y軸に対して回転するのが確認できるかと思います。

scale

scaleは要素に伸縮の効果を追加することができます。

style.css
.transform:hover{
    transform: scale(1.5,1.5)
}

値にはpxdegも使用しません。
1.5と書けば要素の1.5倍、2.0と書けば要素の2倍になります。また、-2.0と書けば要素の1/2倍になります。
このコードではX軸、Y軸共に1.5倍になるのが確認できると思います。

skew

skewは要素に傾斜を持たせることができます。
他の要素と異なり、X軸Y軸に対してしか使用できない特徴があります。また、値にはdegを使用します。

style.css
.transform:hover{
    transform: skew(30deg,30deg)
}

他の要素と異なり、X軸Y軸に対してしか使用できない特徴があります。また、値にはdegを使用します。

transform-originについて

transform-originを使用することによって、要素の変化の基準点を設けることができます。

style.css
.translate:hover{
    transform: rotate(45deg);
    transform-origin: top left;
}

基準点の設定方法ですが、
- 絶対指定(px)
- 相対指定(%)
- 位置指定(top, center,left等)

の3つがあります。
ざっくりで良いなら位置指定、細かく決めたいなら絶対指定、相対指定を使用するという風に分けたら良いと思います。
transform-origin_1.png

まとめ

transformはマスターするとWebデザインの幅がとても広がります。
基礎的な使用方法でも十分幅が広まります。
ぜひマスターしましょう。

SsS136
高校生です。 tweak作ってます。 twitterフォローよろしくお願いします。
https://SsS136.github.io
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした