STEP 3:スクロール値でアニメーションさせる スクロール値の取得と、奥行きのあるコンテンツの作成ができたので、いよいよアニメーションをさせてみよう。 今回のデモでは、1画面の高さをheight: 100%; とし、スクロール値が#sectionの半分に達したときに「.card」のrotateXが0になるようにする。具体的には、以下の計算式で求めた値を変数rotateXに代入する。 変数rotateXの値をtransformプロパティのrotateX関数の引数に渡すことで、スクロール量に応じたコンテンツの変形が実現する。なお、rotateXの値がマイナス値になると「.card」が逆向きに変形してしまうため、値が0を下回ると0を代入して変形を止めている。 ■ソースコード(HTML) <div id="wrapper"> <div id="section" class="inner red"
![スクロールアニメーションによる立体コンテンツの見せ方 (2/2)](https://cdn-ak-scissors.b.st-hatena.com/image/square/47b745ae929cfbc1d3d0cba6fa2dc95854e69a9f/height=288;version=1;width=512/https%3A%2F%2Fascii.jp%2Fimg%2F2014%2F07%2F22%2F406530%2Fl%2F2d59a91a0d8ba6ae.jpg)