动画"/>
2D3D转换动画
目录
- 2D转换
- 1.移动(translate)
- 2.旋转(rotate)
- 3.中心点(transform-origin)
- 4.缩放(scale)
- 5.综合写法
- CSS3 动画
- 动画的基本使用
- 1.用keyframes定义动画（类似定义类选择器）
- 2.元素使用动画
- 动画常用属性
- 1.属性
- 2.动画简写属性
- 3.速度曲线细节
- 3D转换
- 1.3D位移
- 2.3D旋转
- 3.透视
- 4.3D呈现
- 旋转照片案例
2D转换
转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果
- 移动：translate
- 旋转：rotate
- 缩放：scale
1.移动(translate)
语法：
transform.translate(x,y); 或者分开写
transform.translateX(n);
transform.translateY(n);
重点
- translate最大优点：不影响到其他元素位置
- translate中的百分比单位是相对自身元素的 translate:(50%,50%);
- 对行内标签没有效果
<style>div {width: 200px;height: 100px;background-color: pink;/* transform: translate(100px,100px); */ /* 1.移动x坐标 *//* transform: translate(100px,0); *//* transform: translateX(100px); *//* 2.移动y坐标 *//* transform: translate(0,100px); *//* transform: translateY(100px); *//* 3.参数为百分比时 移动的距离是盒子自身的宽度或者高度来对比的 */transform: translateY(50%); /* 这里的50%就是50px，因为盒子宽度是100px */}
</style>
2.旋转(rotate)
语法：transform:rotate(参数)；
重点
- rotate里面跟度数，单位是deg 比如 rotate(45deg);
- 角度为正时顺时针，为负时，逆时针
- 默认旋转中心点是元素的中心点
<style>img {width: 150px;transition: all 1s; /* 过渡 */}img:hover {/* 顺时针旋转45度 */transform: rotate(45deg);}
</style>
3.中心点(transform-origin)
语法： transform-origin: x y;
重点：
- 注意后面参数空格隔开
- x y 默认转换的中心点是元素的中心（50% 50%）
- 可以给x y 设置 像素 或者 方位词(top bottom left right center)
<style>div {width: 200px;height: 200px;background-color: pink;margin: 100px auto;transition: all 1s;/* transform-origin: left bottom; *//* transform-origin: 200px 200px; */transform-origin: 50% 50%; /* 等价于 center center */}div:hover {transform: rotate(360deg);}
</style>
4.缩放(scale)
语法： transform:scale(x, y);
注意：
- x y 用逗号分隔
- transform:scale(1, 1)：宽高都放大一倍，相当于没有放大
- transform:scale(2, 2)：宽和高都放大了2倍
- transform:scale(2)：只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2, 2)
- transform:scale(0.5, 0.5)：缩小
- scale最大的优势：可以设置转换中心点缩放，默认中心点缩放，而且不影响其他盒子
<style>div {width: 200px;height: 200px;background-color: pink;}div:hover {/* transform: scale(2,2); *//* transform: scale(2); *//* transform: scale(2,1); *//* transform: scale(0.5,0.5); */transform: scale(0.5);}
</style>
5.综合写法
注意：
- 格式：transform: translate() rotate() scale()…等
- 顺序会影响转换效果 （先旋转会改变坐标轴方向）
- 同时有位移和其他属性时，要将位移放到最前面，防止顺序不同带来的影响
<style>div:hover {transform: translate(150px,50px) rotate(180deg) scale(1.2)}
</style>
CSS3 动画
**动画（animation）**时CSS3中具有颠覆性的特征之一，可以通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
相比较过渡，动画可以实现更多变化，更多的控制，连续自动播放等效果。
动画的基本使用
1.先定义动画
2.再使用（调用）动画
1.用keyframes定义动画（类似定义类选择器）
<style>@keyframes name{/* 开始状态 */0% {}/* 结束状态 */100% {}}</style>
动画序列：
- 0%是动画的开始，100%是动画的完成。这样的规则就是动画序列。
- 用百分比规定变化发生的时间，或用关键字”form“和”to“，等同于0%和100%
2.元素使用动画
<style>@keyframes move{0% {transform: translate(0,0);}50% {transform: translate(1000px,0);}100% {transform: translate(2000px,0);}}div {width: 200px;height: 200px;backfround-color: pink;animation-name: move; /*动画名称*/animation-duration:2s;/*持续时间*/}
</style>
动画常用属性
1.属性
| 属性 | 描述 |
|---|---|
| @keyframes | 规定动画 |
| animation | 所以动画的简写属性，除了animation-play-state属性 |
| animation-name | 规定@keyframes动画的名称 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒，默认是0 （必须） |
| animation-timing-function | 规定动画的速度曲线，默认是”ease" |
| animation-delay | 规定动画何时开始，默认是0 |
| animation-iteration-count | 规定动画被播放的次数，默认是1，还有infinite |
| animation-direction | 规定动画是否在下一个周期逆向播放，默认是“normal”，alternate逆播放 |
| animation-play-state | 规定动画是否正在运行或暂停，默认是“running”，还有“paused” |
| animation-fill-mode | 规定动画结束后的状态，保持原位置forward，回到起始backwards |
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><style>@keyframes move{/* 开始状态 */0% {}/* 结束状态 */100% {transform: translate(100px,0);}}div {background-color: pink;width: 200px;height: 200px;/* 动画名称 */animation-name: move;/* 持续时间 */animation-duration: 2s;/* 运动曲线 */animation-timing-function: ease;/* 何时开始 */animation-delay: 1s;/* 重复次数 */animation-iteration-count: infinite;/* 是否反向播放 默认是 normal 如果需要反方向就写 alternate */animation-direction: alternate;/* 动漫结束后的状态 默认是 backwards(回到起始状态) 也可以停留在原状态 forwads */animation-fill-mode: forwards;}div:hover {/* 鼠标经过div 让这个div 停止动画，鼠标离开就继续动画 */animation-play-state: paused;}</style><body><div></div></body>
</html>2.动画简写属性
animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束状态；
animation: myfirst 5s linear 2s infinite alternate
- 简写属性里不包括animation-play-state（经常和鼠标经过等其他配合使用）
- 注意时间的顺序（持续时间和何时开始）不能颠倒，其他没有严格要求
3.速度曲线细节
| 值 | 描述 |
|---|---|
| linear | 动画从头到尾的速度相同，匀速 |
| ease | 默认。动画以低速开始，然后加快，在结束前变慢。 |
| ease-in | 动画以低速开始 |
| ease-out | 动画以低速结束 |
| ease-in-out | 动画以低速开始和结束 |
| steps() | 指定了时间函数中的间隔数量（步长） |
- steps()就是分几步完成动画，有了steps()就不要写ease 或者 linear了
3D转换
- 3D位移：translate3d(x,y,z)
- 3D旋转：rotate3d(x,y,z)
- 透视：perspective
- 3D呈现：transform-style
1.3D位移
- transform:translateX(100px) : 仅仅在X轴上移动
- transform:translateY(100px) : 仅仅在Y轴上移动
- transform:translateZ(100px) : 仅仅在Z轴上移动
- transform:translate3d(x,y,z) : x,y,z分别指移动的方向距离
2.3D旋转
- transform:rotateX(45deg)：沿着X轴旋转45度
- transform:rotateY(45deg)：沿着Y轴旋转45度
- transform:rotateZ(45deg)：沿着Z轴旋转45度
- transform:rotate3d(x,y,z,deg)：沿着自定义轴旋转deg为角度（了解即可）
注意：transform:rotate3d(x,y,z,deg)中x,y,z是表示旋转轴的矢量
eg: transform:rotate3d(0,1,0,45deg) 沿着Y轴旋转45度
transform:rotate3d(1,1,0,45deg) 沿着X轴Y轴的对角线旋转45度
3.透视
perspective（）
4.3D呈现
transform-style: flat | preserve-3d
注意：
- 控制子元素是否开启三维立体环境
- transform-style: flat;子元素不开启3d立体空间 默认的
- transform-style: preserve-3d; 子元素开启立体空间
- 代码写给父级（包括父级的父级），但影响的是子盒子
旋转照片案例
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>body {perspective: 1000px;}section div img {width: 300px;height: 200px;}section {position: relative;width: 300px;height: 200px;margin: 100px auto;transform-style: preserve-3d;/* 添加动画 */animation: rotate 20s linear infinite;}section:hover {/* 鼠标放上去停止 */animation-play-state: paused;}@keyframes rotate{from{transform: rotateY(0);}to{transform: rotateY(360deg);}}section div {position: absolute;top: 0;left: 0;width: 100%;height: 100%;/* background: url(旋转照片/1.jpg) no-repeat; */}section div:nth-child(1) {transform: translateZ(300px);}section div:nth-child(2) {/* 先算转再移动 */transform: rotateY(60deg) translateZ(300px);}section div:nth-child(3) {/* 先算转再移动 */transform: rotateY(120deg) translateZ(300px);}section div:nth-child(4) {/* 先算转再移动 */transform: rotateY(180deg) translateZ(300px);}section div:nth-child(5) {/* 先算转再移动 */transform: rotateY(240deg) translateZ(300px);}section div:nth-child(6) {/* 先算转再移动 */transform: rotateY(300deg) translateZ(300px);}</style></head><body><section><div><img src="旋转照片/1.jpg" alt=""></div><div><img src="旋转照片/2.jpg" alt=""></div><div><img src="旋转照片/3.jpg" alt=""></div><div><img src="旋转照片/4.jpg" alt=""></div><div><img src="旋转照片/5.jpg" alt=""></div><div><img src="旋转照片/6.jpg" alt=""></div></section></body>
</html>更多推荐
2D3D转换动画
发布评论