|
CSS3的2D转换 1.transform 属性值 translate（X,Y）：对盒子进行X，Y 轴位移 translateX（N）：可以单独对X轴进行移动 translateY（N）：可以单独对X轴进行移动 居中效果 position：absolute； left：50% top：50% transform：translate（-50%，-50%) 特点 （1）transform不影响其他元素位置 （2）transform中的百分比单位指的是相对元素自身的宽高的百分比来确定的translate（50%，50%），第一个50%指的是宽度的50%，第二个是高度的50%。 对行内元素没有效果 2.rotate 旋转角度 transform：rotate（n deg）；n代表数字，deg为单位。 度数为正代表顺时针，读数为负代表逆时针 转换中心点：transform-origin:x y; 使用具体的像素值来进行中点的设置 例如：transform-origin:100px,100px; 使用方位词来设置中心点 例如：transform-origin:right bottom; 3.2D转换的缩放 使用方法 transform：scale（3）代表宽高放大3倍 transform:scale(2,3) 代表宽放大2倍高放大3倍 transform：scale（0.5,0.5）代表宽高都是原来的一半 scale缩放和宽高缩放设置盒子大小的区别 宽高设置，上沿不动，只是向下来改变宽高，会对盒子产生影响 scale进行缩放时，默认以盒子的中心点来进行缩放，并且不会影响其他盒子大小 4.CSS的动画制作 概念 动画序列：设置0%时的状态，100%是动画的结束后，这样的规则叫做动画序列 在@keyframes 里固定CSS的样式，可以创建点前样式转化为新的样式的动画效果。（keyframes关键帧），可以任意多的样式和任意多的次数，可以使用百分比来规定变化的时间，或者使用关键词from，to来实现等同于0-100% 规定动画：@keyframes 规定动画的名称：animation-name 规定动画完成一个周期所花费的秒或者毫秒，默认是0，必选项animation-duration 规定动画的速度曲线。默认是“ease” animation-timing-function 动画的运动曲线 匀速linear 逐渐变速ease 加速ease-in 减速ease-out 先加速后减速ease-in-out 步长：animation-timing-function：steps（n）; n代表步数 规定动画何时开始，默认是0animation-delay 规定动画被播放的次数，默认是1，还有infiniteanimation-iteration-count 规定动画是否在下一周期逆向播放，默认是normal，alternate逆向播放animation-direction 规定动画是否正在运行或暂停。默认是running，还有paused animation-play-start 规定动画结束后状态，保持forwards回到起始backwards animation-fill-mode 复合写法：animation：name duration timing-functiondelay iteration-count direction fill-mode;
| 
