CSS3动画效果--2D

知识点一:旋转

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

上一篇:css3 3D transform转换(正方*作)


下一篇:Kubernetes 多集群在开源项目 KubeSphere 的应用