CSS

transformでscaleを指定してCSSで３D拡大縮小をしよう！

transform scaleとは？

scaleXのイメージ

1.scaleX

scaleYの動作イメージ

2.scaleY

scaleZの動作イメージ

3.scaleZ

scale3dの動作イメージ

4.scale3D

cssのtransform scaleとはtransformプロパティで2D拡大縮小や3D拡大縮小を指定して表示する事ができる関数です。transformのscaleでは具体的には次のような事ができます。

  1. 要素を横向き(X軸)に拡大縮小する
  2. 要素を縦向き(Y軸)に拡大縮小する
  3. 要素を奥行き(Z軸)に従って拡大縮小する
  4. 要素を縦横奥行き(XYZ軸)に拡大縮小する
 transform_scale.css
transform: scaleX(1.0);
transform: scaleY(1.0);
transform: scaleZ(1.0);
transform: scale3D(1.0,1.0,1.0);

scale3Dの指定

Web表示

scale3D指定

ポイント

  • transform :scale3d(-2.0,1.0,-0.5) translateZ(100px);
  • ※　scale3d(X,Y,Z)と指定される

メモ

  • divタグで親要素、子要素に分ける。こ要素にbackground-imageで背景画像として要素を指定。
  • 親要素には「transform-style: preserve-3d;」を指定し３Dを適用できるようにする。
  • 親要素には「perspective: 440px;」で奥行きを設定する
  • Transformプロパティでは、scaleを先に指定する。（translateを先に書くと正しく３Dを適用できません。）

👆クリックしてコードを見る

 html
<div class="test1"></div>
<div class="test2"></div>

 html
.parent3Dtransform
{
transform-style: preserve-3d;
perspective: 440px;
width:100px;
height:100px;
}
.parent3Dtransform div{
position: absolute;
margin-left: 40px;
margin-top: 10px;
width: 150px;
height: 150px;
}
.test1{
background-image : url("bird1.png");
background-size : cover;
transform :scale3d(-2.0,1.0,-0.5) translateZ(100px);
}

css translateの使い方！transformのtranslateの３D移動

続きを見る

scaleZの指定

scaleZのイメージ

scaleZ(-2.0)で指定した場合

scaleZ(-2.0)

scaleZ(1.0)で指定した場合

scaleZ(1.0)

scaleZ(2.0）で指定した場合

scaleZ(2.0)

owlくん
scaleZはZ軸基準に奥行きを拡大させるんじゃ。scaleZ(1.0)は元の画像の奥行きとなり、scaleY(-2.0)を指定した場合は二倍離れていくように見えるんじゃよ。

Web表示

scaleZ(2.0）で指定した場合

ポイント

  • transform : scaleZ(2.0);

メモ

  • scale3Dと同様に、3DのZ軸を適用する為にtransformのスタイルや奥行きを設定する。

👆クリックしてコードを見る

 html
<div class="parent3Dtransform">
<div class="test1"></div>

 html
.parent3Dtransform
{
transform-style: preserve-3d;
perspective: 440px;
width:100px;
height:100px;
}
.parent3Dtransform div{
position: absolute;
margin-left: 10px;
margin-top: 10px;
width: 150px;
height: 150px;
}
.test1{
background-image : url("bird1.png");
background-size : cover;
transform :scaleZ(2.0) translateZ(100px);
}

transform rotateを使ってCSSで3D回転させる方法！

続きを見る

scaleXの指定

owlくん
scaleXは横幅を拡大させるんじゃ。scaleX(1.0)は元の画像の横幅となり、scaleX(2.0)を指定した場合は二倍の横幅になるんじゃよ。

scaleX(2.0);

Web表示

scaleX指定例

ポイント

  • transform : scaleX(2.0);

メモ

正の値で指定した場合、同じ向きで横幅が大きくなっていく。

👆クリックしてコードを見る

 html
<div class="test1"></div>
<div class="test2"></div>

 html
.test1{
position:relative;
width:100px;
height:100px;
background-image:url("bird2.png");
background-size : cover;
float:left;
}
.test2{
position:relative;
margin-left: 70px;
width:100px;
height:100px;
background-image:url("bird1.png");
background-size : cover;
transform:scaleX(2.0);
float: left;
}

ScaleX(-2.0)

Web表示

ポイント

  • transform : scaleX(-2.0);

メモ

負の値で指定した場合、同じ向きで横幅が大きくなっていく。

👆クリックしてコードを見る

 html
<div class="test1"></div>
<div class="test2"></div>

 html
.test1{
position:relative;
width:100px;
height:100px;
background-image:url("bird2.png");
background-size : cover;
float:left;
}
.test2{
position:relative;
margin-left: 70px;
width:100px;
height:100px;
background-image:url("bird1.png");
background-size : cover;
transform:scaleX(-2.0);
float: left;
}

transform skewを使ってcssでhtml要素に傾斜をつけよう

続きを見る

scaleYの指定

owlくん
scaleYは縦の長さを拡大させるんじゃ。scaleY(1.0)は元の画像の縦の長さとなり、scaleY(2.0)を指定した場合は二倍の縦の長さになるんじゃよ。

scaleY(2.0);

Web表示

transform:scaleY(2.0)で指定したイメージ

ポイント

  • transform : scaleY(2.0);

メモ

scaleY(2.0)で指定した場合、縦の大きさが二倍になる。

👆クリックしてコードを見る

 html
<div class="test1"></div>
<div class="test2"></div>

 html
.test1{
position:relative;
width:100px;
height:100px;
background-image:url("bird2.png");
background-size : cover;
float:left;
}
.test2{
position:relative;
margin-left: 70px;
width:100px;
height:100px;
background-image:url("bird1.png");
background-size : cover;
transform:scaleY(2.0);
float: left;
}

scaleY(-2.0);

Web表示

scaleY(-2.0)で指定したときのイメージ

ポイント

  • transform : scaleY(-2.0);

メモ

scaleY(-2.0)で指定した場合、左右上下逆向きになり縦の大きさが二倍になる。

👆クリックしてコードを見る

 html
<div class="test1"></div>
<div class="test2"></div>

 html
.test1{
position:relative;
width:100px;
height:100px;
background-image:url("bird2.png");
background-size : cover;
float:left;
}
.test2{
position:relative;
margin-left: 70px;
width:100px;
height:100px;
background-image:url("bird1.png");
background-size : cover;
transform:scaleY(-2.0);
float: left;
}

まとめ

TransformプロパティのScale理解する事ができましたか。Scaleを使いこなすことにより、HTML要素に３Dで奥行きを指定し縦横の幅を自由自在に指定する事ができます。

Scale3Dで画像のスケールを指定する際の注意点をまとめます。

注意ポイント

  • Divタグなどで親要素、子要素の入れ子の状態を作り、子要素にbackground-image:url("");を適用する。
  • 親要素には「transform-style: preserve-3d;」を指定し３DでScaleを使えるよう指定する
  • 親要素に「perspective: 440px;」で奥行きを設定する。値は大きくするほどScaleの効き目が大きくなります。
  • Transformプロパティでは、scaleを先に指定する。（translateを先に書くと正しく３Dを適用できません。）
CSS3とは？CSSとの違いは？

続きを見る
この記事タイトルとURLをコピー

-CSS
-

© 2024 OWLVIEW Powered by AFFINGER5