CSSで本当にクリアできるルービックキューブを作ったので3Dについて色々解説してみる その2 | CSS-EBLOG
CSSで本当にクリアできるルービックキューブを作ったので3Dについて色々解説してみる その2 カテゴリ：3D 2013年8月28日 19:04 前回はこれから解説していくルービックキューブの紹介と、3D関連の学習に利用した記事などの紹介をしました。 いよいよ実際にルービックキューブについて解説をしていきたいと思います。 まずは基本的なところから始めて行くので、人によっては今回の記事はほぼ知ってることだらけになるかもしれません。 要素の変形 - transformプロパティの基礎 上でも書いた通り、まずはtransformプロパティの基礎から解説していきます。 すでに使ったことがある人ならおなじみだと思いますが、transformプロパティ（WebKit/Blink系はまだ-webkit-のプレフィクスが必要です）にはいくつかの値が指定できます。 実際にtransformプロパティに指定でき
JavaScriptなし!! CSSだけで実現する3Dアニメーション | HTML5GOGO
CSS3のアニメーションサンプルで、立方体を扱ったものは数あれど、それ以上の多面体のサンプルが見当たらなかったので、倍の12面体を作りました。 イメージ 概要 今回はそのサンプルを題材に、CSS3で新たに追加されたアニメーション系のプロパティをご紹介します。 ※今回ご紹介するプロパティは、執筆時点では全て要ベンダープレフィックスです。 ※対応ブラウザ：Chrome 12～, Safari 5～ Mozillaは「現時点では Z 軸はサポートされていないため 3D の回転や 3D 拡大縮小、3D 変換はサポートされていません。」だそうです。 MDN – CSS transforms の利用 ※グラフィックボードが3Dの表現に対応している必要があります。 ※動作にはCPUパワーが少々必要になります。 HTMLサンプル ※各面はリンクになっています。 回転方向を指定できるコントローラー付きのサン
ドロップダウンメニューのアイディア
よくあるドロップダウンメニューのアイディアです。 CSS 3D Transformsに対応しているブラウザにはそれを使ったUIを、そうでないブラウザにはシンプルな切り替えを提供します。 ドロップダウンメニューのアイディア CSSのみ補足コメントつきで載せておきます。 .nav a { display: block; padding: 0 0.5em; color: #f6f6f6; line-height: 2; text-decoration: none; } /* ulのスタイルリセット */ .nav ul { margin: 0; padding: 0; list-style: none; } /* clearfix */ .nav > ul:after { display: block; clear: both; content: ""; } /* メニューを横並びに */ .n
CSS Transformsについてのメモ
既に色々なデモページが作られていたり、実用されていたりするCSS Transformsですが、ちゃんと理解したかったので調べてみました。 まだそんなに自信はありませんが、以前よりは理解できた気がします。 というわけなので、自分が分かる範囲で説明してみたいと思います。 CSS Transformsは2Dと3Dとで別になっていますが、将来的には SVG Transforms と合わせて一つの仕様になるそうです。 今はまだ別々なので、それぞれにリンクをしておきます。括弧内は現時点での最新の日付です。 WD: CSS 2D Transforms（2011/12/15）ED: CSS Transforms（2011/11/28）WD: CSS 3D Transforms Module Level 3（2009/03/20）ED: CSS 3D Transforms（2011/03/21）新しくなった
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
