transform属性

CSS transform属性允许对某一个元素进行某些形变, 包括旋转，缩放，倾斜或平移等。

注意事项，并非所有的盒子都可以进行transform的转换,transform对于行内级非替换元素是无效的,比如对span、a元素等

常见的函数transform function有：
 平移：translate(x, y)
 缩放：scale(x, y)
 旋转：rotate(deg)
 倾斜：skew(deg, deg)

位移translate

一个参数时，设置x轴上的位移,二个参数时，设置x轴和y轴上的位移值类型

值类型：
 数字：100px
 百分比：参照元素本身

写法(易错):transform属性下引用对应的函数

transform: translate(50px,50px)

transform: translate(100%,100%)

transform: translate(100%)

缩放scale

值个数:
 一个值时，设置x轴上的缩放
 二个值时，设置x轴和y轴上的缩放

值类型：
 数字：
✓ 1：保持不变
✓ 2：放大一倍
✓ 0.5：缩小一半
 百分比：百分比不常用

transform: scale(0.5)

 rotate旋转

旋转：rotate(<angle>)
值个数:
 一个值时，表示旋转的角度
值类型：
 常用单位deg：旋转的角度（ degrees ）
 正数为顺时针
 负数为逆时针

除了deg(度)还可以用圈(turn)

90deg=0.25turn

    .box:hover {
      transform: rotate(45deg);
    }

transform-origin形变中心

transform-origin：形变的原点
 比如在进行scale缩放或者rotate旋转及skew倾斜时，都会有一个原点
一个值：
 设置x轴的原点

两个值：
 设置x轴和y轴的原点
◼ 必须是<length>，<percentage>，或 left, center, right, top, bottom关键字中的一个
 left, center, right, top, bottom关键字
 length：从左上角开始计算(????)
 百分比：参考元素本身大小

      transform-origin: 50% 100%;
      transform: rotate(45deg)

 transform-origin:left top;
 transform: rotate(45deg)

 transform-origin: 200px 100px;
 transform: rotate(45deg)

 倾斜skew(????)

◼ 倾斜：skew(x, y)
 函数定义了一个元素在二维平面上的倾斜转换。
◼ 值个数
 一个值时，表示x轴上的倾斜
 二个值时，表示x轴和y轴上的倾斜
◼ 值类型：
 deg：倾斜的角度
 正数为顺时针
 负数为逆时针

注意：倾斜的原点受transform-origin的影响

transform: skew(10deg);

transform设置多个值

可以给transform设置多个形变的函数,多个之间以空格分隔,非逗号

transform: scale(2) rotate(45deg);

<transform-function>+

          +: 一个或者多个, 并且多个之间以空格分隔

          transform: scale() translate();

        <box-shadow>#

          #: 一个或者多个, 多个之间以, 分隔

          box-shadow: 1px 1px 1px 1px #f00,

<transform-function>+

          +: 一个或者多个, 并且多个之间以空格分隔

          transform: scale() translate();

transform: scale(2) rotate(45deg);