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()