どうも!chuckです。
こんなの作りました。ので、公開します。
わかりにくいですが、8面体です。面が8枚あります(´゚д゚`)
基本的なことは過去記事参照。
前回こちらを作りました。
http://chuck0523.github.io/front-end-coding/rotateBoxes/rotateBoxes1.html
こちらの<div>を使った面の配置については、上記の記事を参照くださいm(_ _)m
追加したのは斜めの面
今回追加したのは斜めの面になります。でも、基本的なことは上記と同じで、回転角度を変えただけです。
CSSで回転体つくってるんだけど、文系だから角度の計算だけで頭パンクする pic.twitter.com/P1TyAz0Nm2
— タク(chuck) (@chuck0523) July 19, 2015
開発の流れ
まず、斜め以外の面を中心から遠ざけます。これによって、斜めの面が入る余地が生まれます。
次に、斜めの面をセット。
なんかずれてる…(;・∀・)
どうやら計算が間違っていたようです(悲しき文系プログラマーの性)
ググったらルートの計算ができて感動(´;ω;`)
これでカッチリとハマりましたヽ(=´▽`=)ノ
書いたコード
DEMO
jQueryでスクロールイベントをかけたので、スクロールすると、
回転しますヽ(=´▽`=)ノ
http://chuck0523.github.io/front-end-coding/rotateBoxes/rotateBoxes6.html