CSS之动画及2D、3D转换

CSS 2D转换

什么是转换？

转换(transform)可实现元素的位移(translate) 、旋转(rotate) 、缩放(scale)，理解为变形

二维坐标系

移动translate

2D移动类似于定位

语法格式：

transform: translate(x,y);
transform: translateX(n);
transform: translateY(n);
重点
① x y为百分数
② 沿着x，y轴移动
③ 转换不会影响其他元素的位置
④ translate中的百分比单位是相对于自身元素的
⑤ 对行内标签没有效果

旋转rotate

语法格式：

transform: rotate（度数）;
重点
① rotate里面跟度数，单位是deg，eg：rotate(45deg);
② 顺时针角度为正，逆时针角度为负
③ 默认旋转的中心点是元素的中心点

转换中心点transform-origin

语法格式：

transform-origin: x y;
重点
① 参数x y用空格隔开
② 默认旋转的中心点是元素的中心点
③ 可以给x y设置百分比、像素或者方位名词（top bottom left right center）

缩放scale

语法格式：

transform: scale(x,y);
重点
① x,y写数字不带单位，表示倍数
② 等比例缩放，同时修改宽度和高度，写一个数字即可
③ scale优势：不影响其他盒子，可设置缩放的中心点

2D转换综合写法

注意：

① 同时使用多个转换，格式为：tranform:translate() rotate() scale()

② 顺序会影响转换的效果（先旋转会改变坐标轴的方向）

③ 当同时有位移和其他属性的时候，位移放在最前面

CSS3 3D转换

三维坐标系

3D移动translate3d

语法格式：
括号内一般写px单位,不用%

//x,y,z不能省略，没有就写0
① transform: translate3d(x,y,z);
② transform: translateX(n);
③ transform: translateY(n);
④ transform: translateZ(n); //可实现近大远小
⑤ transform: translateX(n) translateY(n) translateZ(n);

透视perspective

加了透视才能在网页中产生3D效果

注意：

① 透视效果要写在被观察元素的父盒子 上面

② d:就是视距，视距是一个距离人的眼睛到屏幕的距离，视距越近，物体越大

③ z：就是z轴，物体距离屏幕的距离，z轴（正值）越大，看到的物体越大

语法格式：

perspective: d px;

translateZ和perspective透视

translateZ写在被观察元素中

perspective写在被观察元素的父盒子中

应用：一般给父盒子加透视，对子盒子们加translateZ形成不同的透视效果

3D旋转rotate3d

可以让元素绕着x轴y轴z轴或者自定义轴旋转

语法格式：

transform:rotateX(45deg); //沿x轴正方向旋转45度
transform:rotateY(45deg); //沿y轴正方向旋转45度
transform:rotateZ(45deg); //沿z轴正方向旋转45度
transform:rotate3d(x,y,x,deg); //沿自定义轴正方向旋转，deg为角度（了解）

eg：
transform3d(1,0,0,45deg)表示沿x轴旋转45度
transform3d(1,1,0,45deg)表示沿xy的对角线旋转45度

其中1也可以改成5，10，效果不同

3D呈现transform-style（重要重要）

控制子盒子是否开启三维立体空间
注意：代码写给父盒子，但影响的是子盒子

// 子元素不开启3d立体空间，默认值
tranform-style:flat;
// 子元素开启立体空间
transform-style：preserve-3d;

CSS3 动画

相对于过渡，动画可以做更多控制，连续自动播放

动画的基本使用

步骤：① 先定义动画 ② 调用动画

用keyframes定义动画(类似定义类选择器)

@keyframes 动画名称 {
//开始状态
0% {
width:100px;
}
//结束状态
100% {
width:200px;
}
}
调用动画

div {
width:200px;
height:200px;
background-color:pink;
//动画名称
animation-name:move;
//持续时间
animation-duration:2s;
}

动画序列

0%是动画的开始，100%是动画的完成状态
在@keyframes中规定某项CSS样式
可以改变任意多的样式任意多的次数
其中每个百分比是总的时间的占比
eg：

@keyframes move {
// 0%可省略
0% {
transform:tranlate(0,0);
}
25% {
transform:tranlate(1000px,0);
}
50% {
transform:tranlate(1000px,500px);
}
75% {
transform:tranlate(0,500px);
}
100% {
transform:tranlate(0,0);
}
}
用百分比规定变化发生的时间，或用"from""to"，等同于0%和100%

动画常用属性

animation-iteration-count规定播放次数，默认是1，还有count次数 infinite无限

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

注意：

① 前两个属性name和duration必须写，其余默认的可以不写

② 简写属性里不加animation-play-state

③ 想要动画走出来而不是直接跳回来：animation-direction：alternate

④ 盒子动画结束后，停在结束位置：animation-fill-mode：forwords

运动曲线细节

步长steps()括号里写分几步完成动画，有了steps就不用再写ease或linear