CSS-16-transform属性介绍

transform属性2D转换介绍

用法:

就是在transform属性的后添加指定的属性值.

属性值:

1.平移:translate(x,y);
xy可以是带px单位的数字,百分比和负值
语法:transform:translate(x,y);
总结：
a.最多只能设置两个值，第一个值表示水平位置（x方向）,第二个值表示垂直位置（y方向）
b.如果只设置一个值，则表示水平方向
c.如果值为负数，元素则反方向移动
d.如果值为百分比，则相对于元素自身的宽高百分比

	注:配合定位,这个可以用于实现盒子居中的效果
	例子:
	<div class="father">
		<div class="son"></div>
	</div>
	<style>
	.father{
		 width: 300px;
		height: 300px;
		margin: 100px auto;
		border: 1px solid red;

		position: relative;
	}

	.son{
        			width: 100px;
        			height: 100px;
        			background-color: green;
        
        			/* 1.margin实现元素居中
            		特点：父元素或子元素宽高发生变化，都需要重新计算
        			 */
       			 /* margin-top: 100px;
        			margin-left: 100px; */

        			/* 2.使用定位:子绝父相 
            		特点：子元素元素宽高发生变化，需要重新计算
        			*/
        			/* position: absolute;
        			left: 50%;
        			top: 50%;
        			margin-top: -50px; 
        			margin-left: -50px;  */

        			/* 3.使用transform：translate(x,y) 
            		好处：元素宽高变化，都会自动居中（transform属性值的百分比都是相对于元素自身宽高 ）
        			*/

        			position: absolute;
        			left: 50%;
        			top: 50%;
        			transform: translate(-50%,-50%);
    		}
		</style>

2.旋转:rotate(deg);
语法:transform: rotate(角度),deg是度的意思.

总结：
a.只有一个值，表示旋转的角度(单位deg)
b.角度值为正数：顺时针旋转 负数：逆时针旋转

拓展:
transfrom-origin属性
这个属性是用来修改元素的基准点的
用法:transform-origin:bottom;

总结:
a. 默认值为元素中心点
b. 左：left 右：right 上：top 下：bottom
transform-origin: 100px 100px; 可以设置具体的坐标点
transform-origin: left bottom;也可以设置元素自身的顶点,常用这种方式.
transform-origin修改元素的基准点不仅仅只是作用于旋转，也可以作用于即将学习的缩放与倾斜

3.缩放:scale(x,y);
语法:transform: scale(x,y) xy必须是数字

总结：
a.第一个值表示水平缩放比例（宽度），第二个值表示垂直缩放比例（高度）
b.如果只设置一个值，表示宽度和高度同时缩放相应的比例
c.缩小： 0-1之间的小数 放大： 大于1的数字
d.transform-origin：设置2d转换基准点（作用于旋转、缩放、倾斜）

拓展:解决谷歌默认最小12px字体
解决方案：

style="font-size:12px; transform-origin:left; transform:scale(0.8)"

4.倾斜(不常用了解即可):skew(x,y);
语法：transform: skew(x角度，y角度);

总结：
a.第一个值表示x方向倾斜角度，第二个值表示y方向倾斜角度
b.如果只设置一个值，表示x方向倾斜角度
skew(90deg); 90deg谷歌浏览器会出现问题,不要使用

5.transform属性连写

可以把transform的属性值写到一起用空格隔开,并没有顺序要求.

transform: translate(x,y) rotate(deg) scale(x,y) perspective(800px);

transform-origin这个不能连写在一起

transform属性3D转换介绍

视距(3D专用):perspective(n);
视距：视觉的距离
相当于模拟出一个“眼睛”看物体的距离，遵循近大远小的规则
用法:perspective: 800px; 通常是给父盒子添加视距
前提:
使用3D转换，需要给父元素设置视距属性
perspective: 800px; 这个值可以写到transform里面transform: perspective(800px);

1.3D位移
translate：既可以平移x轴，也能平移y轴
tranelateX：仅仅x轴平移
tranelateY：仅仅Y轴平移
tranelateZ：仅仅Z轴平移

2.3D旋转
rotate：deg是度的意思
rotateX：对着水平的X轴进行旋转,参考引体向上的横杆
rotateY：对着垂直的Y轴进行旋转,参考钢管舞的杆子
rotateZ：对着中心的Z轴进行旋转,参考就是2D旋转的效果

3.3D缩放
transform: scaleX(2) scaleY(2) scaleZ(2);
a. scaleX和scaleY相当于2d转换scale(x,y)
b. scaleZ相当于改变物体厚度(立方体有效)，单独使用无效果(少用)