CSS3属性之transform学习笔记

发表于 | 分类于

transform的属性包括：1、rotate（旋转） 2、skew（斜切） 3、scale（缩放） 4、translate（位移变化），其中还有x,y之分，比如：rotateX，rotateY，以此类推。

rotate

含义：旋转；其中“deg”是“度”的意思
写法：transform：rotate();
如：

1
2
3
4
5
6
7
8
9
10
11
12
@keyframes icon_3 {
  0% {
      transform: rotate(0deg);
  }
  50% {
      opacity: 1
  }
  100% {
      transform: rotate(360deg);
      opacity: 0.2
  }
}

skew

写法：transform：skew(20deg);

1
.demo_transform2{-webkit-transform:skew(20deg);-moz-transform:skew(20deg)}

这个属性我目前还没有用过，也不多见，日后在分析。

scale

含义：比例；“1.5”表示以1.5的比例放大，如果要放大2倍，须写成“2.0”，缩小则为负“-”。
scale(x,y) 对元素进行缩放 ：

  • X表示水平方向缩放的倍数 | Y表示垂直方向的缩放倍数
  • Y是一个可选参数，没有设置的话，则表示X，Y两个方向的缩放倍数是一样的。并以X为准。

写法：transform:scale()：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.demo_transform3{-webkit-transform:scale(1.5);-moz-transform:scale(1.5)}
@-webkit-keyframes pic_3_icon_l {
    0% {
        opacity: 0;
        -webkit-transform: scale(0, 0);
    }
    15.5% {
        opacity: 0;
        -webkit-transform: scale(0, 0);
    }
    20.5% {
        opacity: 1;
        -webkit-transform: scale(0.9, 0.9);
    }
    72.5% {
        opacity: 1;
        -webkit-transform: scale(1, 1);
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1.2, 1.2);
    }
}

translate

含义：变动，位移；如下表示向右位移120像素，如果向上位移，把后面的“0”改个值就行，向左向下位移则为负“-”。
写法：transform:translate(x,y)

  • 取值x表示x轴过渡值
  • 取值y表示y轴过渡值，如果没有赋值，则默认为0
  • 默认以元素的中心点为基点，可以通过transform-origin进行基点的设置
  • x，y如果为负值就反方向移动
    1
    .demo_transform4{-webkit-transform:translate(120px,0);-moz-transform:translate(120px,0)}

热评文章