Hackery, Math & Design — Acko.netSub-pixel Distance Transform High quality font rendering for WebGPU
Content-Length: 335796 | pFad | http://b.hatena.ne.jp/kana321/CSS3/3D/
HTMLとCSSで3D空間を作成、カメラを動かして空間内を動き回ることも可能にした「CSS FPS」
ウェブ開発者のKeith Clarkさんが、ウェブページ製作には欠かせないHTMLとCSSという2つの言語を使い、FPSなどで登場しそうな3D空間を再現しています。 Creating 3D worlds with HTML and CSS http://keithclark.co.uk/articles/creating-3d-worlds-with-html-and-css/ HTMLとCSSで作られた3D空間は以下のページで実際に表示させることが可能。PCはもちろんのこと、スマートフォンやタブレットからも見ることができます。 A 3D engine built using HTML and CSS 3D transforms by Keith Clark http://keithclark.co.uk/labs/css-fps/ 上記ページの「Mouse ＆ Keyboard」をクリッ
[JS]2D、3Dの多彩で面白いエフェクトを備えたスライダーのスクリプト -Flux slider | コリス
iPhone, iPadなどにも対応した、画像のスライド時にCSS3アニメーションを採用し多彩なエフェクトが楽しめるスライダーを実装するjQueryのプラグインを紹介します。 Flux slider デモページ [ad#ad-2] 画像の変更時は、上記のバー状のものをはじめ、ブロック状、サークル状など、2D、3Dのダイナミックなアニメーションが用意されています。 Flux sliderの実装 HTML 各画像をdiv要素で内包します。 <div id="slider"> <img src="img/avatar.jpg" alt="" /> <img src="img/ironman.jpg" alt="" /> <img src="img/tron.jpg" alt="" /> <img src="img/greenhornet.jpg" alt="" /> </div> JavaScr
CSS3で作るダイナミックな3D表現 (1/2)
ダイナミックに切り替わるページナビゲーション 一見するとシンプルなデザインのサイト「HUMAAN」。その魅力は、細部まで作り込まれたインタラクションにある。中でも目を引くのが、フルスクリーンで展開されるダイナミックな変形アニメーションだ。何気なく下部のメニューをクリックすると、ページ全体が大きく回転しながら切り替わる。その動きが非常に気持ちよく、コンテンツをうまく魅せる素敵な仕掛けだ。 この3D回転は、連載第1回「CSS Transitionsを使った3Dロールオーバーのアイデア」で紹介した3D変形と同じ仕組みで実装されている。今回は、3D回転によるダイナミックなコンテンツ切り替えについて、第1回の記事をヒントに再現してみよう。 STEP 1：3Dの構造を考える 最初に、ページ全体を回転させるため、ウィンドウと同じ大きさの2つの面（div要素）を用意し、transformプロパティで変形さ
CSS Transitionsを使った3Dロールオーバーのアイデア (1/2)
イギリスのフリーランス、アートディレクター／デザイナーであるアンソニー・グッドウィン氏のポートフォリオサイト。※2014年5月にサイトリニューアルされたため、Internet Archiveを参照。 3Dの動きがおもしろいマウスオーバー 3Dパーツを多用し、ダイナミックにコンテンツを見せる「DESIGN EMBRANCED」。いろいろな場所をついついマウスオーバーしてみたくなるWebサイトだ。CSS Transitionsを採用することで、各パーツのアニメーションはとても滑らかに、ストレスなく動く。制作者の実装へのこだわりが見える。 3Dパーツは、マウスオーバーやページ遷移、ローディングアイコンに使われており、ユーザーに強いインパクトを与え、一貫した世界観を演出している。
小さい画面で多くの情報を表示する、パネルをダイナミックに3Dでスライドさせるエフェクト -Meny
iOSの方がきれい Menyは3Dトランスフォームをサポートするブラウザで動作し、iPhoneのMobile Safariにも対応しています。 動作に必要なCSS, JavaScriptファイルは、下記からダウンロードできます。 Meny -GitHub
[CSS]数行のスタイルシートで、スター・ウォーズのオープニング風アニメーションを簡単実装
JavaScriptや画像は一切無しで、テキストが3Dで流れるスター・ウォーズのオープニングを作成するスタイルシートを紹介します。 Star Wars 3D Scrolling Text in CSS3 デモ 実装 デモ デモは最新のFirefox, Chromeでご覧ください。 IEは3Dの変形アニメーションにまだ対応していないため、IE10を待ってください。 実装 Step 1: HTML HTMLは簡単で、テキストのp要素をdiv要素二つで内包します。 titlesが外側で、titlecontentがスクロールするセクションです。 <div id="titles"><div id="titlecontent"> <p>テキストテキストテキストテキスト</p> ... ... </div></div> Step 2: CSS まずは見た目のスタイルです。 :after擬似要素でフェード
[CSS]コンテンツを水平・垂直にぐぐぐっと傾けてナビゲーションを表示するスタイルシート
最近ちらほら見かける、コンテンツをアニメーションでぐぐぐっと傾けて、ナビゲーションを配置したサイドバーやヘッダを表示するスタイルシートを紹介します。 実装 Step 1: HTML パースペクティブで表示するコンテンツをdivなどのラッパーを使って配置します。 <div class="wrapper"> <div class="menu"> <div class="hover-icon"> <i class="icon-align-justify"></i> </div> <ul> <li class="category"><a href="#">HOME</a></li> <li class="category"><a href="#">SEARCH</a></li> <li class="category"><a href="#">ABOUT US</a></li> <li class
[JS]レイヤーに要素を配置し、分離して3Dにぐるぐる回転させるスクリプト -CSSMatrix
jQueryのプラグイン「CSSMatrix」を使って、不連続のレイヤーに要素を配置し、それぞれを分離して3Dにぐるぐる回転して表示するデモを紹介します。
HTML5 × CSS3 × jQueryを真面目に勉強 – #10.1 CSS3 Transforms(3D) | DevelopersIO
matrix3d (a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4) ではサンプルコードを交えながら順に見てくとします。 matrix3dですが、こちらもmatrix 2Dと同様、複雑な理屈で取っ付きにくいうえに、rotateや3dやperspectiveといった関数で充分に代替可能なため、今回の記事では割愛させて頂きます。 m(_ _)m Transforms 3D - 事始め 端的に言うならば、Transform 3D は要素を3次元に移動ならびに回転、拡大縮小できるというものです。更に後述するperspectiveを使うことで、要素に奥行きのある表現を持たせることが可能となります。 3DではX軸とY軸に加えて、Z軸が追加されます。Z軸はウィンドウからユーザーに向かう方向が正の値で、ユーザーからウィンドウに向
画像なんていらない!! fontelloとCSS3を使って3Dボタンを作ってみた
こんにちは。 連日の暑さにとろけそう。井畑です。 今回は、前からやってみたかった事に挑戦してみました。 今はやりのWebフォントとCSS3を使って、 3Dボタンを作る事です。 以前から、機会があったらやってみようと思っていたのですが、 なかなか機会にめぐりあえず、どうせなら備忘録ついでに ブログに書いちゃえと思った次第です。 それでははりきってどうぞ！ 目次 1.Webフォントを「fontello」からダウンロード 1-1.Webフォントを「fontello」からダウンロード 1-2.解凍して中身を確認する 2.CSS3でボタンを作成 2-1.HTMLの設定 2-2.CSSの設定(WEBフォント) 2-3.CSSの設定(ボタンの装飾) 2-4.CSSの設定(ボタンのホバー時装飾) 1.Webフォントを「fontello」からダウンロード Webフォントを使うにあたり、最近とてもステキなサイ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Fetched URL: http://b.hatena.ne.jp/kana321/CSS3/3D/
Alternative Proxies:
これは楽しい！巻き簾のようにくるっとはらりとなるCSS 3Dのドロップダウン
[CSS]画像をかっこよく表示し、操作が気持ちいいインタラクションを楽しめる -Fluid twisting image 3D
Tridiv | CSS 3D Editor
reveal.js - The HTML Presentation Framework