【第10回】プログラミング初心者向けCSS3講座【トランスフォーム】

こんにちは、はるおです。これからHTMLとセットで使用される言語、CSS講座を始めます。CSSはHTMLで構成された文章を装飾する(文字色、文字サイズ、位置など)ための言語です。今回の記事から数回にわたって、現バージョンのCSS3について初心者向けに解説していこうと思います。

【HMTL5講座】

【第0回】プログラミング初心者向けHTML5講座

  

 

【前回記事】

【第9回】プログラミング初心者向けCSS3講座【アニメーション】

  

【次回記事】

次回記事を更新し次第リンクを貼っておきます。

本記事では、下記の内容を解説します。

 

 

 

○この記事でわかること

・トランスフォームについてわかる

  

この記事を書いている僕は、プログラミング学習歴8ヶ月。

基礎学習が終わり、最近はLP作成などの実績も少しずつ出してきております。

 

 

また、Twiiterも最近始めたのでこちらの方もフォローしていただけると嬉しいです。

 

Twitterアカウント @clearyou66

 

トランスフォームについて

 

 

transform

トランスフォームを用いると、要素を右方向、下方向に移動させたり、回転させたり、拡大、縮小、傾斜をつけたりすることができるプロパティとなります。

transform: translate(X方向px, Y方向px) rotate(○deg);

translateの1つ目の値で右方向に、2つ目の値で下方向に移動させ、○degで指定した数値分、時計方向に○度回転させます。

 

transform-origin

transform-originは、要素を回転させる際の、回転の中心軸を指定するためのプロパティとなります。使用方法は以下の通りになります。

transform-origin: X方向の値 Y方向の値;

X方向にはleft,center,rightもしくは%,数値を指定します。

Y方向にはtop,center,bottomもしくは%,数値を指定します。

Z方向には数値を指定します。

 

 

transform-style

要素を2次元的に表示するか、3次元表示するかを指定するプロパティとなります。使用方法は以下の通りになります。

transform-style:

flat; 要素を二次元的に表示します。

preserve-3d; 要素を三次元的に表示します。

 

 

perspective

transformで3次元変換を行う際の、要素の中心から視点までの距離を指定するためのプロパティとなります。プロパティの指定方法は、perspective()関数で指定する方法と、perspectiveプロパティで指定する方法があります。

perspective()関数の場合は、指定した要素自体に適用されます。perspectiveプロパティの場合は指定した要素の子要素に適用されます。使用方法は以下の通りです。

perspective:

none; 要素の変更を適用しません。

数値; 要素の中心から視点までの距離を指定します。

 

 

perspective-origin

transformで要素を変換する際に、perspectiveで視点を移動するときの視点の開始地点を指定します。値の指定方法は以下の通りです。

perspective-origin:

X方向 Y方向;

X方向にはleft,center,rightもしくは%、数値を指定します。

Y方向にはtop,center,bottomもしくは%、数値を指定します。

 

 

 

backface-visibility

transformで要素を回転させたときに、その背面を表示するかどうかを指定します。

backface-visibility:

visible; 背面側を表示します。

hidden; 背面側を表示しません。

 

 

 

 

今回の宿題

 

今日の内容に関連のある簡単な宿題を出しますので、次回の講座までにやっておきましょう。

 

宿題:今回はなし。

 

ということで第10回のCSS3講座を終わります。

 

 

 

エディタについてはこちらの記事で説明しているので参考までにどうぞ。

【初心者必見】最強におすすめのエディタ「Atom」について徹底解説

 

 

僕の失敗=駆け出しエンジニア(プログラミング初心者)の失敗 だと思うので、僕の失敗談はすべてこれからの駆け出しエンジニアたちに還元していきたいというスタンスです。

 

また、本記事は超初心者向けに解説しているため、難しい単語や不要な説明は省略させていただいております。わからないことがあればコメント欄にて気軽にご質問ください。

 

僕のプロフィールついては以下の記事にまとめてありますので、時間がある方は見ていっていただけると嬉しいです。

 

 

WordPressで記事投稿をする方法を自己紹介で学習する【初投稿】

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です