animation 动画和3D 转换

1.animation 动画

1.步骤

1. 在css中定义动画函数
1. 给目标元素调用动画函数
/*
使用动画的步骤
1.在css中声明动画函数
1.1 使用关键字@keyframes+动画名定义动画函数
1.2 在动画函数内定义帧动画
0% 动画开始的样式
50% 动画执行到一半的时候的样子
100% 动画执行完毕之后的样子

*/
```
/*1.声明动画函数*/
@keyframes ani_div{0%{width:100px;background-color:red;} 50%{width:150px;background-color:pink;}100%{width:300px;height:300px;background-color:yellow;}
}
```

   /*2. 在元素中调用动画2.1 调用动画2.2 定义动画的持续时间```css*/div{width:120px;height:200px;background-color:aqua;margin:100px auto;/*2.调用动画*/animation-name:ani_div;/*持续时间*/animation-duration:2s;}

2.语法

动画名
设置要使用的动画名 animation-name:xxx;
持续时间
设置动画播放的持续时间 animation-duration:3s
速度曲线
和设置过渡的速度曲线一样 animation-timing-function:linear;

linear：匀速
ease：慢-快-慢默认值
ease-in：慢-快。
ease-out：快-慢。
ease-in-out：慢-快-慢。

延迟时间
animation-delay: 0s;
循环次数
设置动画播放的循环次数 animation-iteration-count: 2; infinite 为无限循环
循环方向
animation-direction
如在动画中定义了 0%：红色 100%：黑色那么当属性值为
normal 默认值红 -> 黑
reverse 反向运行黑 -> 红
alternate 正-反-正… 红 -> 黑 -> 红…
alternate-reverse 反-正-反… 黑 -> 红 -> 黑 …
以上与循环次数有关
动画等待或者结束的状态
animation-fill-mode 设置动画在等待或者结束的时候的状态

forwards：动画结束后，元素样式停留在 100% 的样式
backwards：在延迟等待的时间内，元素样式停留在 0% 的样式
both：同时设置了 forwards和backwards两个属性值

暂停和播放
animation-play-state 控制播放还是暂停
running 播放 paused 暂停

3.复合写法

   animation:name duration timing-function delay iteration-count direction fill-mode;/*两个时间的顺序不能改 持续的时间放前面 延迟的时间放后面 剩下 随便写*/animation:ani_x 2s 3 alternate linear 1s both;

3D 转换

2.1. 3维坐标系

3维坐标系其实是指立体空间，立体空间是由3个轴共同组成的

x轴水平向右
y轴垂直向下
z 轴垂直屏幕由屏幕里面指向屏幕的外面

2.2 3d移动translate3d

作用: 它可以改变物体在空间里面的位置和形状

3d 移动在2d移动的基础上多加了一个可以移动的方向,就是z轴方向

语法：

1. transform:translate3d(x,y,z) 其中x y z 分别指要移动的轴的方向的距离
2. transform:translateX(100px) 仅仅是移动在x轴上移动
3. transform:translateY(100px) 仅仅是移动在y轴上移动
4. transform:translateZ(100px) 仅仅是移动在Z轴上移动

注意:
因为z轴是垂直屏幕，由里指向外面，所以默认是看不到元素在z轴的方向上移动，想要看到，可以使用下面的视距属性设置

2.3 3d旋转

语法

   rotate(0deg)rotateX(0deg)rotateY(0deg)rotateZ(0deg)

了解 !!! rotate3d(x,y,z,0deg)

旋转原点

transform-origin:0 0;

2.4 缩放

- scale(width(宽)的倍数，height(高)的倍数)
- scaleX()
- scaleY()
- scaleZ()
- scale3d(x,y,z)

左手准则:
1 手拇指指向要旋转的轴的正方向
2 其余的手指弯曲的方向就是元素旋转的方向
3d 立方体:
1 定一个父元素大小
2 定子元素 -> 定宽度和高度|重叠在一起定位
3 对6个面开始构建先移动再旋转加透明度
4 给父元素加属性开启3d空间 | 加旋转 rotate3d(1,1,1,30deg)

3 不常用

视距

 perspective: 1000px;/* 视距原点 也是给被观察的物体的父元素添加 *//* 人站在body标签的左上角 */perspective-origin:0 0;

视距原点
开启3d空间 transform-style:preserve-3d;
1 可以对一个物体同时添加移动和旋转和缩放吗??
transform:translate(0,0) rotate(0deg) scale(1,1)
2 平常我们做页面用得最多是2d的转换

animation 动画和3D 转换相关推荐

HTML5 和 CSS3 提高篇下 2D转换 transform（移动、旋转、缩放、中心点、综合写法）；动画（animation）；3D转换；浏览器私有前缀；背景色线性渐变
------ 2D 转换(transform)移动.旋转.缩放.中心点 ------- 转换(transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.缩放等效果转换(tran ...
CSS3的动画及3D转换（animation、transform、rotate3d 、perspective等）【总结】
目录 1. 动画 ① 创建 ② 属性 ③ 关键帧 2. 3D ① transform转换 ② rotate3d ③ translate3d ④ perspective ⑤ transform-styl ...
CSS3之转换(2D转换,动画，3D转换)
@TOC 1. 2D转换 1.1 2D转换之移动translate 1.1.1 translate基本使用 <!DOCTYPE html> <html lang="en&q ...
CSS3动画(2D/3D转换、过渡、动画和多列)
[index.html] <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...
web前端基础 html5+css3（十二.2D转换，动画，3D转换）
一.2D转换 1.2D转换之移动translate (1)transform:translate(x,y); transform:translate(100px,100px); (2)transfor ...
2D转换+动画+3D转换
文章目录 2D转换 translate 实现盒子的竖直和水平居中 rotate origin 缩放scale 综合写法渐变动画动画序列基本使用动画属性 3D转换 3D移动translate3 ...
CSS 3D转换和动画（animation）
一.空间转换 3D 3D坐标系 3D 坐标系比2D 多了一个Z轴. X 轴往右越大,是正值, 否则反之 Y 轴往下越大,是正值,否则反之 Z轴 (指向我们)越大,是正值,否则反之 3D位移完整写 ...
2D转换动画 3D转换
好烦好烦好烦好烦好烦好烦好烦好烦好烦好困好困好困好困好困好困 transform:sacle(x,y) 缩放缩放 x y放倍数宽度,高度注意其中x y用逗号分隔可以是小数不会影响其他盒子鼠 ...
六、CSS 速览 —— 平面转换、3D转换、动画
平面转换.3D转换.动画字体图标 iconfont 阿里图标库从图标库引用素材平面转换 transition: all 1s; 设置元素变换动画 transform: translate(px, ...

animation 动画和3D 转换

animation 动画和3D 转换相关推荐

最新文章

热门文章