H5CSS3--Day02

接上一篇 不定时更新

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

浏览器私有前缀

针对各种浏览器的兼容