反射

要素自体を反転した上で複製し、反射しているように見せるスタイル。非標準。
反射する方向と、実体と反射物との距離、及び反射物をマスクする画像を設定できる。
反射物にグラデーションをかけたい場合は、 CSS グラデーションをマスク画像として利用できる。

デモ

注意

• このように特殊な非標準スタイルは実装が破棄される恐れもある。
• そもそも標準スタイルだけで再現可能なので使用するべきではない。
  また別のやり方もあるが、ほぼ未実装。

応用例

See the Pen 3D(ish) Product showcase by Jamie Coulter (@jcoulterdesign) on CodePen.