読者です 読者をやめる 読者になる 読者になる

コンパイラかく語りき

import { Fun } from 'programming'

CSS3とjQueryでつくるルーレット(っぽいやつ)

どうも!chuckです。CSS3で作るシリーズですヽ(=´▽`=)ノ

 こちらの続きになります。

chuckwebtips.hatenablog.com

 

あっ、この前Androidを持ってる友人に↑のやつを見てもらったんですが、見事に動きが変でしたw

Androidのブラウザってよくわからないです…ヽ(´Д`;)ノ

 

 

ルーレットっぽいやつ

f:id:chuck0523:20150810222251p:plain

こんな感じで、STARTボタンと、ルーレット本体があります。

STARTボタンを押すとくるくる回りますヽ(=´▽`=)ノ

 

f:id:chuck0523:20150810222335p:plain

まあそれだけなんですがw

特に何かが起こるわけではありませんw というか、アタリ判定のイベントってどうやって作るんでしょうね。回転が終わった時に、いっかいいっかい全部の面が等しいか判定すればいけそうですかね…。(?_?)

 

ポイント 

ルーレット本体を囲うように、黒いカバーをかけてます。 アレです。ボックスティッシュの箱みたいな状態ですw

なので、前面と上下の面がちょっとしか見えていません。

 

こちらの製作途中のものがわかりやすいかもしれません。

f:id:chuck0523:20150810222827p:plain

http://chuck0523.github.io/front-end-coding/rotateBoxes/rotateBoxes7.html

 

上図の黒くて四角いborderを、50pxくらいに広げたのがルーレットになります。(こんなんでいいのか…(;・∀・))

 

まとめ

カンタンな例ですが、 CSS3でつくったルーレットの紹介でした!CSS3の3D描写を使えば、こんなものまで作れちゃうんですね!

今度は回転体を横に倒して、視点を中心に置けたらなあと考えています。(自分の周りで回転体がぐるぐる回ってるイメージ)

では!

 

DEMO

http://chuck0523.github.io/front-end-coding/rotateBoxes/rotateBoxes9.html

 

書いたコード

gist89d0dadcb29c356fb5d3

 

gist32da4fc1fec3925c4a41

 

関係ありそうな記事

chuckwebtips.hatenablog.com

 

chuckwebtips.hatenablog.com

  

chuckwebtips.hatenablog.com