---
title: 2D变换
date: 2024-06-06T23:51:26Z
tags: []
---

## 属性

​`transform`​

## 位移

|值|含义|
| :----: | :-------------------------------------------------------------------------|
|​`translateX`​|设置水平方向的位移,需要设置指定长度若指定百分比,参考自身宽度的百分比|
|​`translateY`​|设置垂直方向的位移,需要设置指定长度若指定百分比,参考自身高度的百分比|
|​`translate`​|一个值代表水平方向两个值代表:水平,垂直方向|

## 缩放

|值|含义|
| :----: | :----------------------------------------------------------------------------------------------|
|​`scaleX`​|设置水平方向的缩放比例,值为一个数字,1表示不缩放,大于1放大,小于1缩小|
|​`scaleY`​|设置垂直方向的缩放比例,值为一个数字,1表示不缩放,大于1放大,小于1缩小|
|​`scale`​|设置水平方向,垂直方向的缩放比例,一个值同时代表水平和垂直缩放,两个值分别代表:水平缩放,垂直缩放|

## 旋转

|值|含义|
| ------| ------------------------------------------------------------|
|​`rotateZ`​|设置旋转角度,需要指定一个角度值(deg),正值顺时针,负值逆时针|

## 扭曲

|值|含义|
| ------| -------------------------------------------|
|​`skewX`​|设置元素在水平方向扭曲,值为角度值|
|​`skewY`​|设置元素在垂直方向扭曲,值为角度值|
|​`skew`​|一个值代表skewX,两个值分别代表skewX,skewY|

## 多重变换

多个变换,可以同时使用一个transform来编写
多重变换,建议最后旋转

## 变换原点

1. 元素变换时,默认的原点是元素的中心,使用tranform-origin可以设置变换的原点
2. 修改变换原点对位移没有影响,对缩放和旋转产生影响
3. 如果提供两个值,第一个用于横坐标,第二个用于纵坐标
4. 如果提供一个
   若是像素值,则表示横坐标,纵坐标取50%
   若是关键词,则另一个坐标取50%
