どうも！chuckです。
こんなの作りました。ので、公開します。
わかりにくいですが、８面体です。面が８枚あります(´ﾟдﾟ｀)
基本的なことは過去記事参照。
前回こちらを作りました。
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