|
在css3中我们可以用动画属性来制作一些简单的特效，包括2d和3d。
不论是2d还是3d的特效我们都可以用transfrom属性来实现。
2d和3d都包含旋转和位移和缩放这三种基本属性。
2d的用法
位移translate
transform:translate(X,Y) x表示在水平方向位移的距离，y表示在垂直方向位移的距离。**注意：X轴水平向右为正，向左为负，Y轴垂直向下为正，向上为负；**若取值为百分比，按盒子自身尺寸计算。
旋转rotate
transform:rotate(angle(deg)),注意：rotate旋转是从某一个角度旋转到另一个角度； 正数为顺时针，负数相反。
缩放scale
语法：transform: scale(x,y);x表示水平缩放（宽度）y表示垂直缩放（高度）
注意：如果取值为1个值表示宽和高同时等比设置，如果取值为两个值，第一个值表示为宽，第二个值为高；
zoom缩放
取值为实际浮点数，如果取值为1表示原始大小不缩放，如果取值大于1表示放大的倍数，如果取值小于1表示缩小的倍数；01、如果给父级和设置了对应的zoom属性，该父级盒子里面的子元素会全部等比缩放；02、该属性火狐浏览器和Opera浏览器的某些版本不支持；
中心点（原点）设置 — transform-origin
默认原点为中心点，transform-origin（x,y）x,y取值可为百分比，方位名词，像素。
复合写法
语法： transform: 位移 旋转 缩放;
注意：translate位移必须要写在最前面，如果旋转在最前面会导致坐标轴的位置偏移，导致问题；
3d属性
透视（视距） perspective
z轴的方向垂直于屏幕向外
01、perspective属性要加给被观察元素的父级盒子；
02、perspective的取值建议是800px-1200px之间；
03、perspective的取值必须要加单位px；
04、当perspective的取值固定的时候，Z轴的值接近perspective的取值就会铺满整个屏幕，Z轴的值等于或者大于perspective的取值就会将元素溢出屏幕以外；
3D呈现transform-style
使效果更具立体性质
transform-style:preserve-3d; 开启3d立体空间
transform-style:flat; 默认值
该属性是加给父级盒子的，只有加给父级盒子才能让子级盒子展示3D立体空间
3d位移
复合书写 translate3d(x,y,z)
如果有就书写对应的值，没有的话就用0来代替
3d旋转
用来设置自定义旋转的位置及旋转的角度，x,y,z的取值是0-1之间的数字，0表示没有，1表示有；
遵循左手法则：大拇指指向轴的正方向，手指弯曲的方向是3D旋转的方向
3d缩放
scale（x,y,z）
三种动画：关键帧、自定义、过渡
过渡动画：语法：transition: 属性 动画时间 动画形式 延时;
关键帧动画
通过设置多个节点（关键帧）来精确控制一个或者一组动画，常用来实现复杂的动画效果；
第一步：定义关键帧动画 @keyframes
第二步：调用动画
复合写法 animation: name duration timing-function delay iteration-count direction fill-mode;
使用动画库来制作动画
第一步：将动画库的css文件animate.min.css或animate.css拷贝到自己的项目中并且link引入 第二步：哪一个盒子需要加载动画，就直接用class调用 animated类名，表示调用了动画库，然后去动画库的demo 中查找想要的动画形式的类名，多类名调用； 第三步：实现页面滚动到某一个位置再去加载动画，需要配合一个wow.js插件 第四步：实现延时动画，自己定义对应延时样式，然后哪一个盒子需要延时就直接调用自己写的类名
明天我们给大家讲讲百分比布局和flex弹性布局。
|