ピックアップ記事

はじめてのhtml5 css3 変形とアニメーション

盆栽

はじめてのhtml5 css3

皆さんおはようございます!!

今日もぱりっといきましょう!!

ちなみに、最近暑いのでひやがっています。笑

今回はCSS3の醍醐味、変形とアニメーションです。

それではいきますね。

トランスフォーム関連プロパティ

回転・拡大縮小・移動・傾斜 CSS3新

transformプロパティを使用するとそれだけで、回転・拡大縮小・移動・傾斜の全てを

しかも必要であれば同時に行うことができるようになります。

ただし、このプロパティだけでは変化の過程をアニメーションのように表示させることはできません、

このプロパティで表示できるのは最終的な表示結果だけです。

値はそれぞれの機能に合わせた関数形式になっており、

半角スペースで区切って必要なだけ指定することができます。

値は指定された順番に実行されますので、指定する順番に実行されますので、指定する順序によって

表示結果も変わる場合もあるので注意して下さい

尚、このプロパティでボックスの大きさは位置などを配置位置には影響は一切ありません。

指定できるのは次の値です。

3Dの値も用意されていますが、2Dの値を中心に抜粋して紹介していきます。

transform

  • rotate(角度)

時計周りに回転させる角度を単位付きの実数で指定します

  • scale(実数,実数)

拡大縮小させる倍率を横方向・縦方向の順に単位をつけない実数でカンマ区切って指定します

値をひとつだけ指定するとその値が横方向・縦方向に適応されます!!

  • scaleX(実数)

横方向に拡大縮小を倍率を単位つけない実数で指定します

  • scaleY(実数)

縦方向に拡大縮小を倍率を単位つけない実数で指定します

translate(単位付きの実数・単位付きの実数)

移動させる距離を右方向・下方向の順に単位つきの実数を指定します。負の値は逆になります。

ひとつだけだと、右方向へ指定することとなります。

  • translateX もしくはY

右方向に移動する距離を単位付きの実数Xだと右

Yだと下というふうになります。負の値だと、逆方向に移動します

  • skew(角度) skewX  skewY

傾斜させる角度をx軸に沿った傾斜の角度・y軸に沿った傾斜の角度の順に沿って実数でカンマで区切って指定します 値を一つだけ指定するとx軸に沿った傾斜の角度だけを指定したことになります

  • none

回転・拡大縮小・移動・傾斜を一切していない状態となります

 

そしたらデモりますね!!

<img src=”http://aliceplanblog.com/wp-content/uploads/2014/08/228909_10.jpg” alt=”盆栽” style=”-webkit-transform: rotate(45deg) transform: rotate(45deg)”>

<img src=”http://aliceplanblog.com/wp-content/uploads/2014/08/228909_10.jpg” alt=”盆栽” style=”-webkit-transform: scaleX(3); transform: scaleX(3)”>

<img src=”http://aliceplanblog.com/wp-content/uploads/2014/08/228909_10.jpg” alt=”盆栽” style=”-webkit-transform:translate(300px, -300px) skew(45deg); transform:translate(300px, -300px) skew(45deg);”>

 

これでどうなるか見てみましょう!!

 

盆栽

盆栽

盆栽

すんごいことになってますね笑

transformプロパティはIEとFFはベンダープレフィックスなしでいけるみたいです!!

まわりの要素に影響しないというのがすごいですね!!

今回、トランスフォームでしたが、次回はトランジションやりますね。

これってけっこう面白いと思います!!

そしたら今から、銀行行ってきます!!サランヘヨ!!

この記事を書いた人

中村 真徳
中村 真徳
(株)アリスプラン 代表取締社長
サービスITソリューションで関わる人を幸せに
平成5年4月1日 髙松市より香川町剛柔流空手道スポーツ少年団 発足
平成22年11月 個人事業主開業
平成24年8月  株式会社アリスプラン 代表取締役
会社理念「サービスITソリューションで関わる人を幸せに」
道徳と利潤の調和を目指し日々奮闘中
趣味…自分がしたいことをするのが趣味です

この投稿者の最近の記事

関連記事

  1. 整骨院, 求人, 治療, 高松 事故通院, 高松 整骨院, 高松市 ムチウチ, 高松市 整骨院

    雨の日に・・・

  2. 整骨院, 求人, 治療, 高松 事故通院, 高松 整骨院, 高松市 ムチウチ, 高松市 整骨院

    魔女は突然に、、、

  3. 今までの晩御飯(゚∀゚)①

  4. 終身保険なら

    CCC勉強会 11月ver ここまでの学び

  5. 整骨院, 求人, 治療, 高松 事故通院, 高松 整骨院, 高松市 ムチウチ, 高松市 整骨院

    寒波ーーーーーーー!!

  6. jくえり

    WEBデザイナーのためのJQその2

  7. 整骨院, 求人, 治療, 高松 事故通院, 高松 整骨院, 高松市 ムチウチ, 高松市 整骨院

    包帯固定学

  8. 花粉

    花粉症

  9.  , ありす, 整骨院, 求人, 高松 事故通院, 高松 整骨院, 高松市 ムチウチ, 高松市 整骨院

    受付さん 小顔矯正3回目

人気記事

  1. 整骨院, 求人, 治療, 高松 事故通院, 高松 整骨院, 高松市 ムチウチ, 高松市 整骨院
  2. 予防体操 チラシ
  3. 整骨院, 求人, 治療, 高松 事故通院, 高松 整骨院, 高松市 ムチウチ, 高松市 整骨院
  4. 高松市 猫背

PV解析

  • 84現在の記事:
  • 103591総閲覧数:
  • 210今日の閲覧数:
  • 100昨日の閲覧数:
  • 930先週の閲覧数:
  • 1608月別閲覧数:
  • 71844総訪問者数:
  • 107今日の訪問者数:
  • 99昨日の訪問者数:
  • 602先週の訪問者数:
  • 1244月別訪問者数:
  • 71一日あたりの訪問者数:
  • 0現在オンライン中の人数:
  • 2013年9月21日カウント開始日:
PAGE TOP