CSS (4): 背景 + 変形

• 背景の起源

要素の背景画像の元の開始位置を設定します。この属性を有効にするには、background-repeat が no-repeat であることを確認する必要があります。
可能な値は、border-box | content-box です。
border-box: 背景画像の原点を境界線の左上隅に設定します

リーリー

padding-box: 背景画像の原点をパディングの左上隅に設定します

リーリー

content-box: 背景画像の原点をコンテンツ領域の左上隅に設定します

リーリー

背景クリップ

背景画像の外側を切り取る範囲を設定します。

可能な値は、border-box | content-box です。

border-box: 境界線を含む境界線内にトリミング領域を設定します

リーリー

padding-box: パディングを含むパディング内にトリミング領域を設定します

リーリー

content-box: トリミング領域をコンテンツ領域に設定します

リーリー

変身

• 要素のサイズ、透明度、回転角度、歪みなどを変更します。
構文:

transform: none | +

transform-function には次のメソッドが含まれます:
translation(): オブジェクトの 2D 変換 (2D 変換) を指定します。最初のパラメータは X 軸に対応し、2 番目のパラメータは Y 軸に対応します。 2 番目のパラメーターが指定されていない場合、デフォルト値は 0 です。
変換原点: すべての要素には中心点があります。デフォルトでは、その中心点は要素の X 軸と Y 軸の 50% に位置します。
translateX():オブジェクトのX軸(水平方向)の平行移動を指定
translateY():オブジェクトのY軸(垂直方向)の平行移動を指定
rotate():2D回転を指定(オブジェクトの < 'transform-origin'> 属性の定義
scale(): オブジェクトの 2D スケール (2D スケーリング) を指定します。最初のパラメータは X 軸に対応し、2 番目のパラメータは Y 軸に対応します。 2 番目のパラメーターが指定されていない場合は、最初のパラメーターの値がデフォルトで取得されます。
skew(): オブジェクトのスキュー変換 (斜めの歪み) を指定します。最初のパラメータは X 軸に対応し、2 番目のパラメータは Y 軸に対応します。 2 番目のパラメーターが指定されていない場合、デフォルト値は 0 です。
translation3d(): オブジェクトの 3D 変位を指定します。最初のパラメータは X 軸に対応し、2 番目のパラメータは Y 軸に対応し、3 番目のパラメータは Z 軸に対応します。パラメータは省略できません。
変換: 要素を X 軸と Y 軸に対してそれぞれ 50% オフセットします

リーリー

transform-origin: 要素の中心点を位置 0 0 (左上隅) に設定します

リーリー

translateX: X 軸のオフセットのみを設定します

リーリー

translateY: Y 軸のオフセットのみを設定します

リーリー

回転: 2D 回転の要素を設定します。受け入れられるパラメーターは角度 (度) です

リーリー

スケール: 要素を 3 倍にスケールするように設定します。受け入れられるパラメーターは、倍率を示す数値です

。

リーリー

skew: 要素の傾斜角度を設定します

リーリー

translate3d: 要素の 3D 変位を設定します

リーリー