一、转换
,1 .定义:改变元素在页面的形状、角度,大小,位置的一种效果。
,2 .分类:2 d转换和3 d转换。
,,,2 d转换:
,,(1)位移
,,,,1 - 1作用:改变元素在页面中的位置;
,,,,1 - 2语法:属性——变换;取值如下:
,,,,,,,1-2-1翻译(x):改变元素在x轴的位置方式取值为正,向右移动;x取值为负,向左移动;
,,,,,,,1-2-2翻译(x, y): x同上.Y取值为正,向下移动;y取值为负,向上移动;
,,,,,,,1-2-3 translateX (x):只在x轴上移动;
,,,,,,,1-2-4 translateY (y):只在y轴上移动;
,,(2)缩放
,,,,2 - 1作用:改变元素在页面中的大小
,,,,2 - 2语法:属性——变换;取值如下:
,,,,,,,2-2-1:规模(价值)值表示横向和纵向等比缩放值;默认值为1,表示原始大小;在1表示放大,0 ~ 1表示缩小
,,,,,,,2-2-2:规模(x, y)
,,,,,,,2-2-3:scaleX (x)
,,,,,,,2-2-4:写入scaleY (y)
,,,(3)旋转
,,,,,3 - 1作用:改变元素在页面上的角度,要根据转换原点实现转换效果
,,,,,3 - 2语法:属性——变换;取值如下:
,,,,,,,n, 3-2-1旋转(ndeg)表示转换角度,n为正,表示顺时针旋转,n为负,表示逆时针旋转
,,,,旋转需要注意的地方:1。转换原点;2。元素的坐标轴也随着一同旋转。
,,,,先旋转后偏移与先偏移后旋转,的区别
,,(4)倾斜
,,,,,4 - 1作用:改变元素在页面中的形状;
,,,,,4 - 2语法:属性变换;取值如下:
,,,,,,,,4-2-1:斜(xdeg)向X轴倾斜角度,相当于y轴倾斜角度。
,,,,,,,,4-2-4:skewY (ydeg),,,,,
,,,,三维转换:与2 d相比,多了一个Z轴
角度,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,
,,,,,,,,,,,,,,,,,,,,,3 d
,,
