CSS动画，2D，3D知识点总结，笔记心得
目录
CSS 2D转换
移动：translate
旋转：rotatetransform:rotate(度数)；
缩放：scale
综合写法：位移，旋转，缩放。
CSS3动画（立体旋转）
用keyframes定义动画
元素使用动画
属性：
综合写法：
案例：热点图案。
Tip：opacity是不透明度的意思。
速度曲线细节（模拟卡帧动画）
CSS3 3D转换（近大远小）
3D位移translate3d(x,y,z)
3D旋转rotate3d(x,y,z)
透视perspective
3D呈现transform-style：preserve-3d;
案例：两面翻转的盒子。3D导航栏。
注意：所有的旋转都是按照坐标轴进行的，不要搞错了。(这是菜敏学的过程，自己的理解，若有错误，请指正。)
结尾：一系列的基础文章:
HTML基础：
CSS基础：
CSS3+HTML5：
CSS 2D转换
移动：translate
transform：translate（x,y）;
transform：translateX（n）;transform：translateY（n）;
特点：
- 定义2D转换中的移动，沿着X,Y轴移动。
- 不会影响其他元素的位置。
- 百分比是相对自身元素而言。
- 对行内标签没用。
案例：
这个可以制作相关的鼠标放上去，图标有轻微上移的效果。
（因为不会影响其他盒子的布局）
旋转：rotatetransform:rotate(度数)；
特点：
1.单位deg，rotate（45deg）。
2.正角度，顺时针，逆角度，逆时针。
3.默认旋转中心为元素的中心点。
4.搭配过渡更香。
tips：设置2D转换的中心点transform-origin
语法：transform-origin：x y;
特点：
- 注意参数用空格隔开。
- X,y默认中心点元素的中心点（50%，50%）。
- 可以给x,y设置方位名词（top|bottom|left|right|center）。
缩放：scale
语法：transform：scale（x，y）；
特点：
- 按照中心点缩放。
- 参数是倍数。（1,1相当于没放大。）
- 一个参数可以代替两个，0.5是缩小。
优势：
不会影响其他盒子，甚至可以设置中心点。
案例：鼠标经过，图片放大。
总结：2D搭配过渡加overflow：hidden绝绝子！
综合写法：位移，旋转，缩放。
CSS3动画（立体旋转）
用keyframes定义动画
@keyframes 动画名称{
0%{
width：100px;
}
100%{
width:200px;
}
}
元素使用动画
div {
width:200px;
height:200px;
/* 调用动画*/
animation-name:动画名称;
/*持续时间 */
animation-duration:持续时间;
}
属性：
animation-name: move;
animation-duration: 5s;
animation-timing-function: ease-in-out;（linear是匀速）
/* 经过多少时间开始动画，默认0s /
/ animation-delay: 5s;
/ animation-iteration-count: infinite; / 上面标示重复次数，无限次。就是自动循环 /
animation-direction: alternate; / 有两个属性值：normal（动画完直接闪现回原点），alternate（动画完逆动画回原点）
/ / animation-fill-mode: forwards;
/ / 动画结束后的状态，默认的是backwards，回到起始状态。
我们可以让他保持结束状态forwards / }
综合写法：
Animation：name 5s liner 2S infinite alternate；
案例：热点图案。
Tip：opacity是不透明度的意思。
速度曲线细节（模拟卡帧动画）
steps()就是分几步完成这个动画，就是卡帧动画一样。
CSS3 3D转换（近大远小）
3D位移translate3d(x,y,z)
加了透视才可以看见z轴移动的效果。
3D旋转rotate3d(x,y,z)
左手准则：
左手拇指指向X轴，其余手指弯曲方向就是旋转方向。
透视perspective
加了眼睛，来个明显的效果。3D效果必加透视。
透视就是在哪里加个眼睛，相对于父盒子而言，透视的距离就是对屏幕的距离，而垂直z的距离就是物体到屏幕的距离。
3D呈现transform-style：preserve-3d;
当我们希望按照我们的想法进行旋转展示时，呈现的还是3D旋转后的2D成像效果。转化为3D环境。
案例：两面翻转的盒子。3D导航栏。
注意：所有的旋转都是按照坐标轴进行的，不要搞错了。(这是菜敏学的过程，自己的理解，若有错误，请指正。)
结尾：一系列的基础文章:
HTML基础：
前端HTML等学习笔记，复习，以及自己的理解_minmin66666的博客-CSDN博客推荐新手学了一点点知识，或者学习过快导致知识点王吉吉等等一些疏漏。可以过来查找一下记忆点不清楚的代码。这也只是我学习过程中记录的笔记，加上最后学完其他的一起整理的笔记。欢迎指点我的不足，错误。是个菜菜，请多多指教。https://blog.csdn.net/minmin66666/article/details/123445125?spm=1001.2014.3001.5501
CSS基础：
CSS基础知识点总结，笔记与心得_minmin66666的博客-CSDN博客菜敏对学习的一些记录，若有不足，请指教，谢谢谢谢谢谢！CSS基础性质CSS盒子模型边框（border）内边距（padding）外边距（margin）外边距合并元素的显示与隐藏DisplayVisibilityOverflowCSS元素显示模式两大元素CSS元素显示模式转换CSS的背景背景图片半透明背景复合写法CSS基础选择器https://blog.csdn.net/minmin66666/article/details/123445777?spm=1001.2014.3001.5501
CSS3+HTML5：
CSS3，HTML5提高_minmin66666的博客-CSDN博客菜菜敏的碎碎念又来啦。我学习CSS3，HTML5的笔记。对于前端的一些基础知识大同小异鸭。但是菜菜敏还是希望可以帮到大家。这是我自己整理的笔记。若有不足和疑问，请多多指教。谢谢谢谢。https://blog.csdn.net/minmin66666/article/details/123446447?spm=1001.2014.3001.5501