CSS3 2D 3D转换

1、什么是转换
转换时时元素改变形状、位置、尺寸的一种效果
2、转换的分类
主要分为2d转换和3d转换
3、转换的属性：
transform: 取值复杂；

 

2d转换属性的取值：
1、位移：让元素在x轴或Y轴进行移动
语法：transform: 1、translateX(具体的数值或者百分比)
2、translateY(具体的数值或者百分比)
3、translate(x)
4、translate(x,y)
类似于相对定位：可以使元素发生移动，但是并不会脱离文档流

2、旋转：让元素以圆心为起点，进行旋转
语法：transform: rotate(ndeg)
1、deg是一个关键字，不能省略，代表多少度
2、n具体的旋转角度值
n正数，顺时针旋转
n负数，逆时针循环
3、 rotateX(ndeg) - x轴进行旋转，躺下去了
rotateY(ndeg) - y轴进行旋转，侧身
rotate(ndeg) - z轴进行旋转

3、缩放：让元素以圆心为起点，按比例进行放大或缩小
语法：transform: scaleX(1) scaleY(1) scale(1);
1 - 不放大不缩小本身大小
小于1 - 缩小
大于1 - 放大
scale(1) - x轴和y轴同时缩放

5、3d转换属性的取值：
前提：1、元素必须设置成3d布局：transform-style: preserve-3d;
2、必须要在父元素上设置景深：perspective: 1200px; 距离3d效果有多远，越大就坐的越远，越小就坐的越近

1、位移：translate3d(x,y,z);//x - 左移右移 y-上移下移 z-前移后移
2、缩放：scale3d(x,y);
3、旋转：rotate3d(0,0,0,ndeg);//能用就行了

6、修改圆心：transform-origin: left/center/right/top/bottom;
比如：transform-origin: left top;