接上一篇 不定时更新
transfrom移动
transition: all 0.3s; 过度时间
transform: translateX(50%); 移动的距离是盒子本身宽度的百分之50
transform: translate(-50%,-50%);
居中显示 盒子往上走自己的一半 这个要结合绝对定位使用
translate 对行内元素是无效的
旋转 transfrom : rotate ( xx deg ) °
鼠标经过时,就会旋转指定度数
三角形的旋转
鼠标经过时,倒三角会旋转指定度数
转换中心点
鼠标经过时复原
2D转换
缩放
输入值为小数就是缩小 >0就是整体放大
括号里只写一个就是 宽高都方法x倍
scale 不会影响其他div 还可以设置中心点
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201124141157879.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1MDM1MTcw,size_16,color_FFFFFF,t_70#pic_center)
放大
多个同时进行
如果同时进行多个转换 格式为 transform translate rotate scale
先进行旋转会改变坐标的方向
位移的权重大于其他
CSS3动画
动画制作过程:
1.定义动画 @keyframes
2.调用动画
animation-name: xx; 调用的动画名
animation-duration: 3s;动画的持续时间
动画使用过程中任意使用不限个数
from 0 to 100% 同理
过渡动画
实际效果会在屏幕四周进行移动 最终回到起点~~~
动画常见属性
动画简写属性
字体默认大小是16px
动画效果
案例: 热点图
速度曲线
3D转换
3D位移 translate3d(x,y,z)
透视 perspective
3D旋转 rotate3d(x,y,z)
3D呈现 transfrom-style
浏览器私有前缀
针对各种浏览器的兼容