HTML5基础加强css样式篇（css属性transform 函数（2D）的scale(),transform-origin,skew(),translate(),rotate() ）（二十四）

1.transform 2D简介：

1.变形(transform)是CSS3新增的一个样式，该样式配合4个变形函数一起使用，函数如下变化

    1.缩放  scale()

    2.倾斜  skew()

    3.位移  translate()

    4.旋转  rotate()

2.缩放函数scale（）：

   （1）语法介绍：

       ①scale(x, y) 定义 2D 缩放转换，改变元素的宽度和高度。 

       ②scaleX(n)  定义 2D 缩放转换，改变元素的宽度。 

       ③scaleY(n)  定义 2D 缩放转换，改变元素的高度。

     （2）使用方法：

        transform: scale(x, y) 

        transform: scaleX(n) 

        transform: scaleY(n) 

         可使用的参数值：

         0 <= (x, y, n) < 1    缩小 

         (x, y, n) = 1             默认值

         (x, y, n) > 1             放大

2.1 比较普通的设置大小的缩放和使用scale函数缩放的差别：

（1）普通的元素放大，设置元素的宽度(width)与高度(height),会有如下问题，
         ①默认基于元素左上角缩放。
         ②会影响兄弟元素的位置。
         ③如果父元素未设置大小，会影响父元素的大小。
（2）缩放函数缩放元素的特点，
  ①只能对块元素设置缩放（确切的说所有的变换函数都只能设置在块元素中）

        ②可以设置在元素内任一一点进行缩放。也被称作变形的中心点
        ③不会影响兄弟元素的位置。
        ④如果父元素未设置大小，不会影响父元素的大小。

       可以解决的问题：放大一个元素的同时，需要放大其内容及其子元素。放大一个元素，不影响现有布局。（商品图片放大）

3.变形中心点简介：

（1）语法介绍
          transform-origin: x-axis y-axis z-axis;
（2）参数说明
         ①x-axis 定义视图被置于 X 轴的何处。可能的值：
         •left
         •center
         •right
         •length (单位px)
         •% 
        ②y-axis 定义视图被置于 Y 轴的何处。可能的值：
        •top
        •center
        •bottom
        •length
         •%
       ③z-axis 定义视图被置于 Z 轴的何处。可能的值：
       •length
       注：z-axis 的值不能使用%和关键字，2D变换不需要考虑 z-axis

   效果如下：

    


   

  4.倾斜函数skew（）：

     (1)语法介绍

     ①skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴。
     ②skewX(angle) 定义 2D 倾斜转换，沿着 X 轴。
     ③skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴。
  （2）用法
     ①transform: skew(x-angle,y-angle)
     ②transform: skewX(angle)
     ③transform: skewY(angle)
    (3)参数说明
     ①angle  表示旋转的角度，单位是deg。
    (4)例子说明
     ①逆时针45度   45deg
     ②顺时针45度  -45deg
    (5)倾斜函数的特点

    ①只能对块元素设置缩放
    ②可以设置在元素缩放的中心点。
    ③不会影响兄弟元素的位置。
    ④如果父元素未设置大小，不会影响父元素的大小。
    ⑤元素倾斜后，其内容及子元素的都会发生倾斜，可以对内容或子元素设置“反向”倾斜解决。

    

    


位移函数 translate()
5.位移函数translate（）：

    (1)语法介绍
    ①translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。
    ②translateX(n) 定义 2D 转换，沿着 X 轴移动元素。
    ③translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。
    (2)例子
    ①transform: translate(x,y)
    ②transform: translateX(n)
    ③transform: translateY(n)
    (3)参数说明
    ①x, y, n 表示移动的距离 (length) 。例如 200px
   注：1.变换中心点对位移函数 translate()不其起作用      2.位移过大会导致父元素出现滚动条，此时需对父元素设置over-flow:
hidden

   注：需要改变一个元素的位置，但是不影响父元素的的大小及兄弟元素的位置时可以使用。

旋转函数 rotate()
6.旋转函数rotate(): 
   可以做旋转效果。如时钟的表盘

（1）语法介绍
  ①rotate(angle) 定义 2D 旋转，在参数中规定角度。
（2）例子
  ②transform: rotate(angle)
（3）参数说明
  ③angle 表示旋转的角度。例如 45deg（顺时针旋转45度）, -45deg（逆时针旋转45deg）

  注：改变变换中心点的位置，可以实现不同的旋转效果

7.变形函数的组合使用：

    


8：变形函数特点：

   1.元素变形，不会影响相邻兄弟元素的位置。
   2.元素变形，如果父元素没有指定高度，不会导致父元素高度的变化。
   3.元素变形，只有在块元素中才生效。
   4.元素变形，元素的文本及其后代元素都会变形。

   最重要的一点就是变形函数要注意每执行一次变形后中心点，和坐标轴比例的变化

位移函数 translate()