05-CSS3转换

 

transform

rotate（旋转）

transform: rotate(xdeg);　　//表示该容器按照x度旋转

//角度为正，顺时针方向。角度为负，逆时针方向。

 

translate（平移）

transform: translateX(xxpx);　　//水平方向往右移动xx像素。（除了像素单位外还支持其他常用的常量单位。）

transform: translateY(yypx);　　//垂直方向往下移动yy像素。（除了像素单位外还支持其他常用的常量单位。）

transform: translate(xxpx，yypx);　　//水平方向往右移动xx像素，垂直方向往下移动yy像素。（除了像素单位外还支持其他常用的常量单位。）

 

scale（缩放）

transform:scaleX(.5);  //水平方向   往中间   压缩50%（数值为百分比）

transform:scaleY(.5);  //垂直方向   往中间   压缩50%

transform:scale(.5,.5)；  //水平方向   往中间   压缩50%，垂直方向   往中间   压缩50%

 

skew（扭曲）

transform: skewX(xxdeg);  //水平方向  逆时针方向  扭曲xx度。

transform: skewY(xxdeg);  //垂直方向  顺时针方向  扭曲xx度。

transform: skew(xxdeg,xxdeg);  //水平方向  逆时针方向  扭曲xx度。垂直方向  顺时针方向  扭曲xx度。

 

 

transform(3D)

rotate(3D)

transform: rotateX(xxdeg);  //以下为该旋转示意图

 

transform: rotateY(xxdeg);  //以下为该旋转示意图

 

transform: rotateZ(xxdeg);  //围绕着Z轴旋转

 

 rotate3d缩写

transform: rotate3d(x,y,z,angle);　　//指定对象的3d旋转角度

//前3个参数分别表示旋转的方向x,y,z，后面第4个参数表示旋转的角度，参数不允许省略

　x、y、z 的取值，0代表该方向不生效，1代表该方向生效

　当xyz都有值的时候，x  变为  .x  ，表示该方向旋转度数   =   angle   *   0.x     如：

　x的值为0.5，angle的值为45，则x的旋转角度为45*50%=22.5

　y值跟z值，同理

 

translateZ

transform:translateZ(数字);

该translateZ() CSS函数沿着z轴在三维空间中重新定位元素，即，从观察者的角度而言更近或者更远。这个变换是由一个<length>元素定义的，它指定元素向内或向外移动的距离。

 

translate3d缩写 

transform: translate3d(x,y,z);  //xyz都不可以省略

 

scaleZ

transform:scaleZ(数值);  //在Z轴进行缩放

 

scale 3d缩写

transform:scale3d(x,y,z);  //在X、Y、Z轴进行缩放，任何一个值都不可以省略。

 

origin 

transform: origin(x,y,z);  //xy代表坐标，z可以省略，旋转的时候可以围绕该点旋转。

 

preserve-3d

transform-style: flat | preserve-3d;  //flat默认，什么都不做；preserve-3d实现3d环绕的效果。

 

perspective

perspective: none | number;  //none默认值，number展示的视觉效果，number是观察者与平面的距离。

perspective-oringin: x轴 y轴;  //默认值是50%  50%  ，里面可以是top bottom left right，表示观察者从哪一个面去看平面。

 

backface-visibility

backface-visibility: visible | hidden;　　//默认值visible可见，hidden不可见，指定元素背面面向用户时是否可见。