CSS3动画效果--2D

标签：tran   第一个   nsf   动画效果   form   font   ros   效果   知识点   

知识点一：旋转

transform: rotate(180deg)   //只能传一个参数，，正值是顺时针  负值是逆时针

 度数用deg表示

沿着x轴旋转：

transform: rotateX(180deg);

 沿着Y轴旋转：

transform: rotateY(180deg);

 默认是沿着中心旋转。。。

改变中心轴旋转位置

transform-origin: top left; //沿着左上角旋转
transform-origin: 100px 200px; //沿着坐标那个点旋转

 和上一个配合使用，有两种形式写参数

知识点二：倾斜

transform: skew(x,y);
transform: skewX(x);
transform: skewY(y);

 可以传两个参数：第一个是x轴的偏移，，角度是与y轴的夹角

第二个是Y轴的偏移，，角度是与X轴的夹角

围绕圆心旋转

改变旋转轴位置：  transform-origin： top right;     //同上

知识点三：平移

transform: translate(x,y);
 x轴距离    y轴距离   可以为正负值

 平移没有origin属性  ，，因为是整体平移

知识点四：缩放

transform： scale(n);

transform:  scale(x,y);

一个参数时 ： n表示数字，0-1之间是缩放的，正常值是1，，，比1 大的就是放大

两个值时，一个是X位置，一个是Y位置

有origin属性，，，同上上上。。。。。。。。

CSS3动画效果--2D

标签：tran   第一个   nsf   动画效果   form   font   ros   效果   知识点   

原文地址：https://www.cnblogs.com/bigbang66/p/13543475.html