Result CSSだけで簡単なパララックス効果を出そう、というもの。既にありふれた情報かもしれませんが。 内容としては3D空間を作り、ヘッダに疑似要素を作って背景画像を設定、z軸に沿ってオブジェクトを遠ざけるよう設定します。 header::before { transform: translateZ(-4px); } header div { transform: translateZ(-2px); }また、3D空間の中でフラット描画されるよう、親要素にtransform-styleを設定しておきます。 header { transform-style: preserve-3d; }これだけだと単に縮小された状態になってしまうのでscaleで戻してあげる必要があります。 scaleで戻すには計算が必要です。Googleの記事では以下の計算法が使われています。 scale = (pers
![CSSだけでヒーローイメージのセクションにシンプルなパララックス効果](https://cdn-ak-scissors.b.st-hatena.com/image/square/b6b1c87ada2ad66409793e3653c810e333009609/height=288;version=1;width=512/http%3A%2F%2Fkachibito.net%2Fwp-content%2Fuploads%2F2019%2F12%2Fsite-icon.png)