← Playgrounds一覧に戻る
CSS数学関数デモ
スライダーで座標を動かすと、abs()が点の大きさと透明度を、sign()が色相を決めます。原点から離れるほど点が大きく濃くなります。
座標: (-50, 30)
座標の絶対値の和: 80
象限: 第二象限
※absを用いて、座標の絶対値の和が大きいほど要素のサイズを大きくしています。透明度も同じようにしています。
要素のサイズ: transform: scale(calc(1 + (abs(x) + abs(y)) / 200))
透明度: opacity: calc(0.5 + (abs(x) + abs(y)) / 200)
※signを用いて、座標の点の色を変えています。座標の和が正であればhsl(280, 70%, 50%)、負であればhsl(120, 70%, 50%)、0であればhsl(200, 70%, 50%)にしています。
座標の点の色: background-color: 'hsl(calc(sign(var(--x) + var(--y)) * 80 + 200), 70%, 50%)'