CSS3教程:Transform-变形处置
日期：2013-11-29 浏览次数：21116 次
网页制造aiyiweb文章简介：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轴的（垂直方向）扭曲
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
