Imgix APIsレンダリング APIワープスキュー

スキュー

skew

skew パラメーターは画像をせん断し、一方の辺の組をもう一方に対してずらします。視点の角度を簡易的に表現する最も手軽な方法で、CSSの skew() 変換に相当します。

構文

skew は度数で2つの数値を受け取ります。どちらも必須です。

skew=x,y

水平方向のせん断が先に適用され、次に垂直方向が適用されます。x が正の値の場合は上辺が右に移動し、y が正の値の場合は右辺が下に移動します。

元の画像
sandbox-demo
skew=20,15 は両方の軸でせん断します
sandbox-demo
skew=25,0 は上辺を右に移動させます
sandbox-demo
skew=0,25 は右辺を下に移動させます
sandbox-demo

いずれかの値の絶対値が89度以上の場合、両方が0の場合(skew=0,0)、数値が1つしか指定されていない場合、このパラメーターは無視されます。

レイヤー形式

mark-skew と blend-skew は、レイヤーを元画像に配置する前にせん断します。どちらも mark-skew[1] のようなインデックス付きの指定に対応しています。

出力

せん断された形状の外側の領域は透明になります。透明度に対応していないフォーマットでは bg で塗りつぶされ、bg が指定されていない場合は黒になります。これは、せん断によって生じる余白を白で塗りつぶす Cloudinary とは異なります。

せん断ではなく本来の遠近法のワープが必要な場合は distort を使用してください。