CSS3 2D、3D转换

1.CSS3 2D转换

转换（transform）可以实现元素的位移、旋转、缩放等效果

• 移动：translate
• 旋转：rotate
• 缩放：scale

1.移动

transform:translate(x,y);  或者分开写
transform:translateX(n);
transform:translateY(n);

• 不会影响到其他元素的位置
• translate中的百分比单位是相对于自身元素的translate：（50%，50%）
• translate对于行内元素是无效的

2.旋转

transform：rotate（度数)

• rotate里面跟度数，单位是 deg 比如 rotate（45deg）
• 角度为正时，顺时针，负时，为逆时针
• 默认旋转的中心点是元素的中心点

2D设置转换中心点 transform-origin

transform-origin：x y；

• x y 默认转换的中心点是元素的中心点（50% 50%）
• 还可以给x y 设置 像素 或者 方位名词（ top bottom left right center）

3.缩放scale

transform：scale（x，y）；

4.2D转换综合写法

• 同时使用多个转换，其格式为：transform：translate（） rotate（） scale（）…等
• 其顺序会影响转换的效果

transform:translate(150px,50px) totate(180deg) scale(1.2)

2.CSS3动画

动画（animation）是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果

制作动画分为两步：

1.先定义动画

2.再使用（调用）动画

1.用keyframes定义动画（类似定义类选择器）

@keyframs 动画名称{
	0%{
		width：100px；
	}
	100%{
		width：200px；
	}
}

动画序列

• 0%是动画的开始，100%是动画的完成，这样的规则就是动画序列
• 在@keyframs中规定某项CSS样式，就能创建由当前样式逐渐改变为新样式的动画效果
• 可以改变任意多的样式任意多次
• 使用百分比或关键词 ”from“ 和 ”to“ 规定变化发生的时间

2.元素使用动画

	div{
		width:200px;
		height:200px;
		backagecolor:pink;
		margin: 100px auto;
		animation-name:动画名称；
		animation-duration:持续时间;
}

3.动画简写属性

animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态；

	animation：myfirst 5s linear 2s infinite alternate；

• 简写属性里不包含 animation-play-state
• 想要动画走回来，而不是直接跳回：animation-direction ：alternate
• 盒子动画结束后，停在结束位置 ：animation-fill-mode ：forwards

4.速度曲线细节

animation-timing-function

值	描述
linear	动画从头到尾的速度是相同的匀速
ease	默认，动画以低速开始，然后加快，在结束前变慢
ease-in	动画以低速开始
ease-out	动画以低速结束
ease-in-out	动画以低速开始和结束
steps（）	指定了时间函数中的间隔数量（步长）

2.CSS3 3D转换translate3d

• 3D位移：translate 3d（x，y，z）
• 3D旋转：rotate 3d（x，y，z）
• 透视：perspective
• 3D呈现 transfrom-style

1.3D移动

• translform：translateX（100px）：仅仅是在x轴上移动
• translform：translateY（100px）：仅仅是在y轴上移动
• translform：translateZ（100px）：仅仅是在z轴上移动
• translform：translate 3d(x,y,z)

2.透视perspective

设置元素被查看位置的视图：

div
{
	perspective: 500;
	-webkit-perspective: 500; /* Safari 和 Chrome */
}

3.3D旋转 rotare3d

• transform ：rotateX（45deg）：沿着x轴正方向旋转 45 度
• transform ：rotateY（45deg）：沿着y轴正方向旋转 45 度
• transform ：rotateZ（45deg）：沿着z轴正方向旋转 45 度
• transform ：rotate 3d（x,y,z,deg）：沿着自定义轴旋转 deg 为角度

4.3D呈现 transfrom-style

• 控制子元素是否开启三维立体环境
• transfrom-style ：flat子元素不开启3d立体空间 默认的
• transfrom - style ：preserve - 3d； 子元素开启立体空间