スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

CSS3のアニメーションで立体的な動き(safariのみ対応)

このCSS3のアニメーションに衝撃を受けまして、ちょっと自分もCSS3で遊んでみました。

と、その前に、最初に覚える約束事「-webkit-perspective」

CSS3でZ軸(奥行き)の指定を反映させるためには、親要素(かな?)に「-webkit-perspective」の指定を行わなくてはいけないみたい。これは「奥行き感の強さ」ということで理解しましたが、そんな感じであってるでしょうか。

わかりやすくアニメーションにしてみました。

demo(safari)

要素の位置は動かさず、-webkit-perspectiveだけを200~50で変化させています。こんなに違って見えるんですねー

ということで、CSSアニメーションで遊んでみました。(※MacのSafariでしか確認してないから、windowsで動いてなかったらごめんなさい

X軸回転の組み合わせ

パネルが立体的に回転。キモい動き。

demo(safari)

以下がアニメーション部分のCSSです。詳しいCSSはソースを覗いてみてください。

@-webkit-keyframes wrapperAnimation {
	0%    { -webkit-transform: rotateX(0deg); }
	50%   { -webkit-transform: rotateX(180deg); }
	100%  { -webkit-transform: rotateX(360deg); }
}
@-webkit-keyframes innerAnimation {
	0%    { -webkit-transform: rotateX(0deg); }
	50%   { -webkit-transform: rotateX(-180deg); }
	100%  { -webkit-transform: rotateX(-360deg); }
}

MATRIX(もしくは地球の本棚)のような動き

奥から要素が高速でやってくる、そこまでキモくない動き。

demo(safari)

@-webkit-keyframes move {
	0%    { -webkit-transform: rotateX(85deg) translateZ(-600px); }
	100%  { -webkit-transform: rotateX(85deg) translateZ(800px); }
}
スポンサーサイト

comment

Secret

RSS
  • 最近記事のRSS
最新記事
カテゴリ
月別アーカイブ
コンタクト

名前:
メール:
件名:
本文:

Ads
検索フォーム
プロフィール

gryng

gryng

MEやってます。twitter

Amazon
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。