移动web复习01-平面转换,3D空间转换,动画

文字图标

双类名:iconfont xx

平面转换

1. 位移:transform: translate(X, Y)

掌握绝对居中

2. 旋转:transform-origin:(数值+deg)

注意单位是deg不是px

3. 缩放:transform: scale(缩放倍数);

大于1表示放大, 小于1表示缩小

渐变

background-image: linear-gradient(朝哪个方向, 颜色1, 颜色2);

区别背景半透明和盒子半透明

空间转换

1. 空间位移:

transform: translate3d(x, y, z);

transform: translateX(值);

transform: translateY(值);

transform: translateZ(值);

要想实现透视效果得给父级元素添加透视(perspective:800 – 1200px; )

2.空间旋转

transform: rotateZ(值);

transform: rotateX(值);

transform: rotateY(值)

 重点掌握旋转方向,左手法则

3.立体呈现: transform-style: preserve-3d;

呈现立体图形步骤

1. 盒子父元素添加transform-style: preserve-3d；

2. 按需求设置子盒子的位置（位移或旋转）

4.空间缩放:

transform: scaleX(倍数);

transform: scaleY(倍数);

transform: scaleZ(倍数);

transform: scale3d(x, y, z);

动画

1.使用动画

1. 定义动画

    @keyframes dance {
   
               from {
                   transform: scale(1);
               }
   
               to {
                   transform: scale(1.5);
               }

2. 使用动画

   animation: dance .5s infinite;

2.动画属性

动画匀速运动: linear

无限循环动画: infinate

左右来回执行动画: alternate

动画结束停留在最后一帧状态: forwards

动画结束停留在第一帧状态: backwards

动画停止: animation-play-state: paused;

3.用steps实现逐帧动画

animation-timing-function: steps(N)；

4.精灵动画制作步骤

1 准备显示区域

2 设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图

3 定义动画

4 改变背景图的位置（移动的距离就是精灵图的宽度）

5 使用动画

6 添加速度曲线steps(N)，N与精灵图上小图个数相同

7 添加无限重复效果

5.多组动画

 /* 多组动画 animation:动画1, 动画2 */
            animation: run 1s steps(12) infinite, move .2s linear infinite;