目录
- [CSS 2D转换](#CSS 2D转换)
- [CSS3 3D转换](#CSS3 3D转换)
- [CSS3 动画](#CSS3 动画)
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