CSS3 2D、3D转换

2021-07-31 18:33:41 阅读：190 来源： 互联网

标签：CSS3 动画 rotate 元素 transform 2D animation translate 3D

1.CSS3 2D转换

转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的唯一、旋转、缩放等效果

移动：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