ピックアップ記事

はじめての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. 今までの晩御飯(゚∀゚)③

  5. 高松市 整骨院

    利用者様といいね!!その④

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

    ダイエット対決

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

    利用者様といいね!!その⑳

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

    高校野球シーズン到来!!!

  9. うどん県PV

    弊社、凄腕クリエイターがうどん県のPVを手伝いました。

人気記事

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

PV解析

  • 84現在の記事:
  • 92693総閲覧数:
  • 45今日の閲覧数:
  • 70昨日の閲覧数:
  • 498先週の閲覧数:
  • 2450月別閲覧数:
  • 62583総訪問者数:
  • 44今日の訪問者数:
  • 65昨日の訪問者数:
  • 448先週の訪問者数:
  • 1342月別訪問者数:
  • 58一日あたりの訪問者数:
  • 0現在オンライン中の人数:
  • 2013年9月21日カウント開始日:
PAGE TOP