缩放 transform

转换属性 transform

  转换是css3中的一个特征，可以实现元素的缩放，位移，变形。
作用：
  使元素在位置或者形状上发生一定的改变。
属性：
  transform
属性值：
  scale：缩放（一般）
  translate 位移（重点）
  rotate 旋转（重点）
  skew  倾斜（了解）

1.scale 缩放

  格式：  transform:scale(x,y)
    x:表示水平方向上的缩放倍数
    y：表示垂直方向上的缩放倍数

  如果只写一个值表示等比例缩放。

 【注意】
  1.缩放只是一种视觉效果，不会对别的盒子造成影响。
  2.取值大于1表示放大，小于1表示缩小。

示例

.box { width: 100px; height: 100px; background-color: rgba(255, 103, 0, 1); margin: 0 auto; transition: transform 1s }
.box:nth-child(0n+1) { margin-top: 100px; border: 1px solid }
.box:hover { transform: scale(2) }

2.位移：translate

  格式：
    transform:translate(水平位移量，垂直位移量)

  取值：水平位移量为正，向右移动，垂直方向的正方形为下。

  只写一个值，表示水平位移量。

  参数为百分比的话，是相对于自身的宽高。

  位移只是一种视觉效果，不会对别的盒子造成影响。

示例

.box1 { width: 100px; height: 100px; float: left; transition: transform 1s; background-color: rgba(255, 103, 0, 1) }
.box1:hover { transform: translateX(150px) }
.box2 { width: 100px; height: 100px; float: left; background-color: rgba(46, 204, 113, 1) }

3旋转：rotate

  格式：transform：rotate（角度（deg））
    单位：deg，正值：顺时针，负值：逆时针。

示例

.box3 { width: 300px; height: 300px; background-color: rgba(255, 103, 0, 1); margin: 100px auto; transition: transform 1s linear }
.box3:hover { transform: rotate(45deg) }

转换原点origin

transform-origin：水平坐标，垂直坐标。

  取值：
    px

    单词
      center left top right bottom

示例

.box4 { width: 300px; height: 300px; background-color: rgba(255, 103, 0, 1); margin: 100px auto; transition: transform 2s linear; transform-origin: bottom }
.box4:hover { transform: rotate(60deg) }

4 倾斜：skew（不常用）

格式：
  transform:skew(水平倾斜角度，垂直倾斜角度)
    单位：deg  正值：顺指针 负值：逆时针
  两个角度相交，不要大于等于90deg.

示例

.box5 { width: 100px; height: 100px; background-color: rgba(20, 100, 88, 1); margin: 100px auto; transition: transform 1s linear }
.box5:hover { }

注意点

  1.转换操作不会影响到其他元素
  2.只能添加给块元素，不能添加给行内元素。
  3.同时添加多个变形操作，先执行前面的，再执行后面的。
  4.多个变形操作必须写在一个transform属性后面，书写多次transform属性时，后面的会层叠掉前面的。