[CSS] Transform

7424 ワード
CSS テキストリンク

へんかん


特定の要素のサイズやシェイプなどのスタイルを変更します.
transform: 변환함수1 변환함수2 ...

translate関数(移動)


要素を指定した方向と距離で移動
/* 2D 변환 함수 */
translate(x, y)
translateX(x)
translateY(y)
/* 3D 변환 함수 */
translate3d(x, y, z)
translateZ(z)

scale関数(サイズ)


要素を指定したサイズでスケール
/* 2D 변환 함수 */
scale(x, y) 또는 scale(배수)
scaleX(x)
scaleY(y)
/* 3D 변환 함수 */
scale3d(x, y, z)
scaleZ(z)

かいてんかんすう


要素を指定した角度で回転
正-順/負-反時計回り
遠近法(deg)と併用され、立体感があります
/* 2D 변환 함수 */
transform: rotate(각도)
/* 3D 변환 함수 */
transform: rotate3d(x, y, z, 각도)
transform: rotateX(각도)
transform: rotateY(각도)
transform: rotateZ(각도)

ピボット関数は1位にします.
伝達値:物事を見る距離
transform: perspective(500px) rotateX(45deg);
パースビューを使用する場合は、パースビュー関数ではなくパースビュープロパティを使用することをお勧めします.

けいしゃかんすう


指定した角度で要素をツイストするには
/* 2D 변환 함수 */
transform: skew(x, y)
transform: skewX(x)
transform: skewY(y)
例
transform: skewX(30deg)
transform: skewX(-30deg)
transform: skewY(15deg)
transform: skew(30deg, 15deg)

変換に関連するプロパティ。


transform-originプロパティ


特定のポイントを変換のベースに設定
transform-origin: <x축> <y축> <z축> | initial | inherit

パースビューのプロパティ


遠近感があり、値が大きいほどユーザーから遠くなる함수 또는 속성タグに使用する親要素
perspective: <크기> | none

パースビュー-原点プロパティ


立体表示する要素の下の位置を指定します.
perspective-origin: <x축 값> | <y축 값>

transform-styleプロパティ


親要素に適用される3 D変換を子要素に適用
transform-style: <값>
  • deg:サブエレメントとして平面処理
  • transform:サブエレメント3 D効果を適用

    • backface-visibilityプロパティ


    エレメントの背面を表示するかどうか
    backface-visibility: visible | hidden
    flat:背面を透明と非表示にする
    機械室料金システムのレポートまとめ2
    [JPA]永続性コンテキスト(3)-エンティティクエリー