css3中的变形处理——transform功能(旋转、缩放、倾斜、移动)
标签: css3 变形处理 transform功能 个人分类: css3 1 transform属性
在css3中,可以利用transform功能实现文字或图像的旋转、缩放、倾斜、移动这4中类型的变形处理。
(1)支持
到目前为止:safari3.1以上、chrome8以上、firefox4以上、opera10以上浏览器支持该属性。
2 旋转
使用rotate方法,在参数中加入角度值,角度值后面跟表示角度单位的“deg”文字即可,旋转方向为顺时针方向。
transform:rotate(45deg);
3 缩放
使用scale方法来实现文字或图像的缩放处理,在参数中指定缩放倍率。
transform:scale(0.5);//缩小一半
(1)可以分别指定元素的水平方向的放大倍率与垂直方向的放大倍率
transform:scale(0.5,2);//水平方向缩小一半,垂直方向放大一倍。
4 倾斜
使用skew方法实现文字或图像的倾斜处理,在参数中分别指定水平方向上的倾斜角度与垂直方向上的倾斜角度。
transform:skew(30deg,30deg);//水平方向上倾斜30度,垂直方向上倾斜30度。
(1)只使用一个参数,省略另一个参数
这种情况下视为只在水平方向上进行倾斜,垂直方向上不倾斜。
transform:skew(30deg);
5 移动
使用translate方法来移动文字或图像,在参数中分别指定水平方向上的移动距离与垂直方向上的移动距离。
transform:translate(50px,50px);// 水平方向上移动50px,垂直方向上移动50px
(1)只使用一个参数,省略另一个参数
这种情况下视为只在水平方向上移动,垂直方向上不移动。
transform:translate(50px);
6 对一个元素使用多种变形的方法
transform:translate(150px,200px) rotate(45deg) scale(1.5);
7 指定变形的基准点
在使用transform方法进行文字或图像变形的时候,是以元素的中心点为基准点进行变形的。
transform-origin属性
使用该属性,可以改变变形的基准点。
transform:rotate(45deg);
transform-origin:left bottom;//把基准点修改为元素的左下角
(1)指定属性值
基准点在元素水平方向上的位置:left、center、right
基准点在元素垂直方向上的位置:top、center、bottom
8 3d变形功能
(1)旋转
分别使用rotatex方法、rotatey方法、rotatez方法使元素围绕x轴、y轴、z轴旋转,在参数中加入角度值,角度值后面跟表示角度单位的deg文字即可,旋转方向为顺时针旋转。
transform:rotatex(45deg);
transform:rotatey(45deg);
transform:rotatez(45deg);
transform:rotatex(45deg)rotatey(45deg)rotatez(45deg);
transform:scale(0.5) rotatey(45deg)rotatez(45deg);
(2)缩放
分别使用scalex方法、scaley方法、scalez方法使元素按x轴、y轴、z轴进行缩放,在参数中指定缩放倍率。
transform:scalex(0.5);
transform:scaley(1);
transform:scalez(2);
transform:scalex(0.5)scaley(1);
transform:scale(0.5) rotatey(45deg);
(3)倾斜
分别使用skewx方法、skewy方法使元素在x轴、y轴上进行顺时针方向倾斜(无skewz方法),在参数中指定倾斜的角度
transform:skewx(45deg);
transform:skewy(45deg);
(4)移动
分别使用translatex方法、translatey方法、translatez方法、使元素在x轴、y轴、z轴方向上进行移动,在参数中加入移动距离。
transform:translatex(50px);
transform:translatey(50px);
transform:translatez(50px);
9 变形矩阵
每种变形方法的背后都存在着一个对应的矩阵。
(1)计算2d变形(3 x 3矩阵)
可以将这个2d变形矩阵书写为matrim(a,b,c,d,e,f),a~f均代表一个数字,用于决定怎样执行变形处理。
(2)平移的2d矩阵
//效果一致:右移150px,下移150px
transform:matrix(1,0,0,1,150,150);
transform:translate(150px,150px);
(3)计算3d变形
3d缩放变形使用的4x4矩阵
transform:matrix3d(sx,0,0,0,0,sy,0,0,0,0,sz,0,0,0,0,1);
//效果一致:x轴方向上缩小五分之一,y轴方向上缩小一半。
transform:scale3d(0.8,0.5,1);
transform:matrix3d(0.8,0,0,0,0,0.5,0,0,0,0,1,0,0,0,0,1);
(4)可通过矩阵执行多重变形处理
将需要的变形矩阵相乘得到一个新的变形矩阵可实现该处理。
如果觉得《html文字旋转以后变形 CSS3中的变形处理——transform功能(旋转 缩放 倾斜 移动)...》对你有帮助,请点赞、收藏,并留下你的观点哦!