且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

web前端之CSS3(3):2D和3D转换

更新时间:2022-04-23 18:37:17

CSS3 转换可以可以对元素进行移动、缩放、转动、拉长或拉伸。
2D 转换
以下列出了所有的转换属性:

Property 描述 CSS
transform 适用于2D或3D转换的元素 3
transform-origin 允许您更改转化元素位置 3
transform属性2D变换方法:
 

translate():根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动。transform: translate(50px,100px);/ 标准语法 /
rotate():在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转。;transform: rotate(30deg);/ 标准语法 /
scale():用于增加或缩小元素的大小。transform: scale(2,3); / 标准语法 /
skew():语法——transform:skew( [,]);  
包含两个参数值,分别表示X轴和Y轴倾斜的角度,如果第二个参数为空,则默认为0,参数为负表示向相反方向倾斜。skewX();表示只在X轴(水平方向)倾斜。skewY();表示只在Y轴(垂直方向)倾斜。

matrix():有六个参数,包含旋转aitingivf.com,缩放,移动(平移)和倾斜功能。代表了一个3*3的矩阵(线性代数)——变换矩阵,通过变换矩阵和点坐标(x,y)的乘积得出新坐标(x1,y1)。