当前位置:首页 > 建站教程 > CSS教程 > CSS3教程:Transform-变形处理

CSS3教程:Transform-变形处理

文章TAG:
时间:2018-08-09来源: 作者: 文章热度:

破洛洛文章简介:CSS3教程:Transform-变形处理.

transform:使用transform功能实现四种文字或图像的变形处理,分别是旋转、缩放、斜切以及移动。 none: 无转换 matrix(<number>,<number>,<number>,<number>,<number>,<number>): 以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a,b,c,d,e,f]变换矩阵 translate(<length>[, <length>]): 移动,水平方向的移动和垂直方向的移动-mo-transform:translate(20px,10px).只用一个值的话,只指在水平方向的移动。 指定对象的2D translation(2D平移)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0 translateX(<length>): 指定对象X轴(水平方向)的平移 translateY(<length>): 指定对象Y轴(垂直方向)的平移 rotate(<angle>): -webkit-transform:rotate(45deg);使用rotate,在参数中加入角度值,角度值后面跟着表示角度单位的“deg”文字即可,旋转方向为顺时针旋转。 指定对象的2D rotation(2D旋转),需先有transform-origin属性的定义 scale(<number>[, <number>]): -webkit-transform:scale(0.5)使该元素缩小了50% -webkit-transform:scale(0.5,2)使该元素水平方向缩小了50%,垂直方向放大一倍 指定对象的2D scale(2D缩放)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认取第一个参数的值 scaleX(<number>): 指定对象X轴的(水平方向)缩放 scaleY(<number>): 指定对象Y轴的(垂直方向)缩放 skew(<angle> [, <angle>]):倾斜 -webkit-transform:skew(30deg)水平方向倾斜角度30deg -webkit-transform:skew(30deg,30deg)使该元素水平方向缩小了50%,垂直方向放大一倍 指定对象skew transformation(斜切扭曲)。 第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0 skewX(<angle>): 指定对象X轴的(水平方向)扭曲 skewY(<angle>): 指定对象Y轴的(垂直方向)扭曲

相关CSS教程