css基础（七）－－动画效果

26.rotate（）

函数指定的角度参数使元素相对原点进行旋转，设置一个角度值，指定旋转的幅度，如果是正值，相对圆点中心顺时针，负值相对于圆点中心逆时针

-ms-transform:rotate(7deg); //-ms代表ie内核识别码

-moz-transform:rotate(7deg); //-moz代表火狐内核识别码

-webkit-transform:rotate(7deg); //-webkit代表谷歌内核识别码

-o-transform:rotate(7deg); //-o代表欧朋【opera】内核识别码

transform:rotate(7deg); //统一标识语句。。。最好这句话也写下去，符合w3c标准

 

27.skew（）

扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状。

Skew()具有三种情况：

1、skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）；第一个参数对应x轴，第二个参数对应y轴

2、skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）

3、skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）

 

28.缩放scale（）

让元素根据中心点对对象进行缩放

1、 scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）

注意：y是一个可选参数，如果y不设置，表示x，y缩放倍数相同

2、scaleX(x)元素仅水平方向缩放（X轴缩放）

3、scaleY(y)元素仅垂直方向缩放（Y轴缩放）

注意：

scale默认值是1，如果取值在0.01-0.99之间表示缩小

取值大于等于1.01表示放大

 

29.translate()

可以将元素按指定方向移动，类似position中的relative。不影响web的其他组件

translate我们分为三种情况：

1、translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）

2、translateX(x)仅水平方向移动（X轴移动）

3、translateY(Y)仅垂直方向移动（Y轴移动）

 

例子：

-webkit-transform:translate(-50%,-50%);

  -moz-transform:translate(-50%,-50%);

  transform:translate(-50%,-50%);

表示不知道宽度和高度的元素水平垂直居中

 

30.matrix（）

含有六个值（a,b,c,d,e,f）的变换矩阵，基于水平和垂直方向重新定位元素

就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素

 

例子：通过matrix实现translate（100px，100px）效果

  -webkit-transform: matrix(1,0,0,1,100,100);

  transform: matrix(1,0,0,1,100,100);

31.原点transform－origin

任何元素都有一个中心点，位于x轴和y轴的50%处

在没有重置的情况下，css的各种操作都是以自己中心位置进行变形

但也可以改变中心位置

例如：

.wrapper div {

  background: orange;

  color: #fff;

  -webkit-transform: skew(15deg);

  -moz-transform: skew(15deg);

  transform: skew(15deg);

  -webkit-transform-origin: top right;

  -moz-transform-origin: top right;

  transform-origin: top right;

}／／将元素的原点重置到右上角，然后进行15度的扭曲。