HTML-从零开始的学习过程（13）

CSS3转换

transform属性，让一个元素在坐标系统中变形，这个属性会包含一系列的变形函数，可以移动，旋转和缩放元素；
兼容性：ie10+ 、 firefox16、 chrome36 、 safari9 、opera12.1；

2D转换

旋转rotate

• 通过指定的角度对原元素指定一个2D的旋转；
• 语法：transform:rotate(< angle>)；
• 参数说明：
  1. angle指定角度；
  2. 正数表示顺时针旋转；
  3. 负数表示逆时针旋转；

移动translate

• translateX（x） – 仅仅水平方向移动（X轴移动）
  参数值说明：
  数值可以改变大小；
  left right无效果；
  %可以用；
  em单位可以用；
• translateY（y） – 仅仅垂直方向移动（Y轴移动）
  参数值说明：
  • 数值可以改变大小；
  • left right无效果；
  • %可以用；
  • em单位可以用；
• translate（x，y） – 水平方向和垂直方向同时移动（X轴移动和Y轴移动）
  参数值说明：
  • X轴的值必须填写的；
  • Y轴值可填可不填，如果不填写默认是0；

缩放scale

• scaleX()元素水平方向缩放
  使用[sx,1]缩放矢量执行缩放操作的，sx为所需参数；

• 语法：transfrom: scaleX(< number>)；

• 参数说明：

  • .5表示 0.5 代表以中心为原点进行百分之50的缩小；
  • 设置比1大的值,表示放大；
  • 设置为0图片显示无；

• scaleY()元素垂直方向缩放
  使用[1,sy]缩放矢量执行缩放操作的，sy为所需参数

• 语法：transfrom: scaleY(< number>)；

• 参数说明：

  • .5表示 0.5 代表以中心为原点进行百分之50的缩小；

  • 设置比1大的值,表示放大；

  • 设置为0图片显示无；

• scale(x,y)元素水平方向和垂直方向同时缩放
  使用[sx,sy]缩放矢量的两个参数指定一个2D缩放；

• 语法：transfrom: scale([< number>])；

• 参数说明：

  • .5表示 0.5 代表以中心为原点进行百分之50的缩小；

  • 设置比1大的值,表示放大；

  • 设置为0图片显示无；

  • 两个参数说明x和y都进行比例缩放，一个参数说明x和y同时进行等比例缩放；

扭曲skew

• skewX(x)元素在水平方向扭曲变形
  按给定的角度沿着X轴指定一个斜切变换；

• 语法：transform: skewX(角度)；

• 参数说明：

  • 正值：逆时针；
  • 负值：顺时针；
  • -90deg到90deg是正确的取值范围；

• skewY(y)元素在垂直方向扭曲变形
  按给定的角度沿着Y轴指定一个斜切变换；

• 语法：transform: skewY(角度)；

• 参数说明：

  • 正值：顺时针；
  • 负值：逆时针；
  • -90deg到90deg是正确的取值范围；

• skew(x,y)元素在水平方向和垂直方向扭曲变形
  按给定的角度沿着Y轴和X轴指定一个斜切变换；

• 语法：transform: skew(角度,[角度])；

3D转换

旋转rotate X()

• 指定对象在X轴方向的旋转角度；

• 语法;transform： rotateX(angle)；

旋转rotate Y()

• 指定对象在Y轴方向的旋转角度；

• 语法;transform： rotateY(angle)；

旋转rotate Z()

• 指定对象在Z轴方向的旋转角度；

• 语法;transform： rotateZ(angle)；

旋转rotate 3d()

• 指定对象的3D旋转角度；
• 语法;transform： rotate(x,y,z,angle)；
• 前三个参数分别表示旋转方向x,y,z，第四个参数表示旋转的角度，参数不允许省略；
• 建议取值的范围：
  • x:0-10；
  • y:0-10；
  • z；0-10；
  • angle：-360deg-360deg；

移动translateZ

• 指定对象的Z轴的平移；
• 语法：transform：translateZ（）；
• 参数对应Z轴，不允许省略；
  发现改变值没有变化，注意设置5px表示向屏幕来了5个像素，负值类似；

移动translate3d

• 指定对象的3D位移；
• 语法：transform：translate3d（x,y,z）；
• 参数对应各个轴，参数不允许省略；<