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

コンパイラかく語りき

import { Fun } from 'programming'

CSS3でつくる立体8面体(福引のガラガラみたいなやつ)

どうも!chuckです。

こんなの作りました。ので、公開します。

f:id:chuck0523:20150724225717p:plain

 

わかりにくいですが、8面体です。面が8枚あります(´゚д゚`)

 

 

基本的なことは過去記事参照。

chuckwebtips.hatenablog.com

 

前回こちらを作りました。

f:id:chuck0523:20150720121220p:plain

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

 

こちらの<div>を使った面の配置については、上記の記事を参照くださいm(_ _)m

 

追加したのは斜めの面

今回追加したのは斜めの面になります。でも、基本的なことは上記と同じで、回転角度を変えただけです。

 

 

開発の流れ 

まず、斜め以外の面を中心から遠ざけます。これによって、斜めの面が入る余地が生まれます。

f:id:chuck0523:20150724232206p:plain

 

次に、斜めの面をセット。

f:id:chuck0523:20150724232435p:plain

なんかずれてる…(;・∀・)

 

どうやら計算が間違っていたようです(悲しき文系プログラマーの性)

 ググったらルートの計算ができて感動(´;ω;`)

f:id:chuck0523:20150724232537p:plain

これでカッチリとハマりましたヽ(=´▽`=)ノ

f:id:chuck0523:20150724232551p:plain

 

書いたコード

gist2732a417a096284d7f72

 

gist6458ffc5d6f2cdf3936c

 

DEMO

jQueryでスクロールイベントをかけたので、スクロールすると、

f:id:chuck0523:20150724230436p:plain

 

回転しますヽ(=´▽`=)ノ

f:id:chuck0523:20150724230445p:plain

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