CSS3で回転するオブジェクトの作成

タカハシ先生作成の３つの回転オブジェクトのサンプルを参考に回転の仕組みを解説。

• ① 円周上に文字を並べる為に、transform:rotateZ()を使う
• ② 円周上に並べた文字を立てる為に、transformのrotateX,Yとtranslate3dを使う
• ③ 円周上に中心を向けて立てた文字を回転

使われているCSS3についての解説

• transform-style: preserve-3d; = 3D空間の中で子要素がそれぞれの位置を維持するように描画
• transform:rotateZ(0); = Z軸を軸とする角度によって時計回りの回転度を指定
• transform-origin: center bottom; = 左上を起点とした横方向、縦方向の座標位置、centerは50%、bottomは100%
• animation:turn infinite 10s linear; = アニメーションの種類（普通回転）、回数無限、１周する秒数、一定速度
• animation:standing; = オブジェクトが立ち上がった状態で回転
• animation:lookCenter; = オブジェクトが中心に対して面を向けて回転
• transform:perspective(XXXXpx); = オブジェクトに奥行き感を与える、深さを数値で指定

Firebugで数値を変えて動きを理解しましょう。

「オリジナルWebサービス・コンテンツ」プロジェクトのアイデア出し

各メンバーよりアイデアを抽出し、次回の検討材用とした。

• PCスクール卒業生が実務経験を積むことができる機会を提供できるサイト。
  各自のプロフィールや作品を掲載し、依頼したい案件を募り、内容によって無料、有料で請け負う。（真中のぶ）
• 現在のりんごサイトをオープンにする。web関係の人脈を拡大する。SNSに取り組む（かおりんご）
• 女性利用限定の不用の新品・中古品を売るサイト。（ジェイ子）
• 遠方に買い物に行けない方のための自家用車相乗り情報サイト。
  ペット預かりをしてくれる人を捜せるサイト。（ランサーしょうじ）
• タクシーの相乗り希望者を捜せるサイト（白タク.com）。
  今日何を食べたいか、候補を提案してくれるサイト。
  他人の願い事に投票して、投票金（５円程度）を得票の多いものに賞金として差し上げるサイト。（sa-ka）
• ぼんやり検索（曖昧なワードで検索する）
  くしゃみ分布図（今くしゃみをしている人の所在がわかる）
  夢分布図（夢の傾向分析）
  レシート分析（購買志向がわかる）
  コーディNight（服装のコーディネイトをしてくれる）
  食べかけ画像の修復（箸つけちゃいました.com）（タカハシ先生）

その他

• 次回は  12月28日（金）18:00〜22:00 高松学習館第２教室 お間違えないように！
• 住所：〒190-0011 東京都立川市高松町3-22-5
• 高松学習館案内はこちら

以上