CSS 2D&3D转换与动画

CSS 2D&3D转换与动画

字体图标

• 字体图标展示的是图标，本质是字体

• 处理简单的，颜色单一的图片，使用字体图标

• 使用：

  1. 下载：https://www.iconfont.cn/

     

  2. 引入字体图标样式表

     

  3. 对应标签上classz增加对应的类名，必须调用2个类名

     

     

2D

• 使用transform属性实现元素的位移、旋转、缩放等效果
• 一个元素上要实现多个效果时，要写复合属性，写在一起

位移

• 语法：transform:translate(水平移动距离,垂直移动距离);
• 取值：正负均可
  • 像素单位数值
  • 百分比（参照物为自身盒子的尺寸）
• 技巧：
  • translate()如果只给出一个值，表示X轴方向移动距离
  • 单独设置某个方向的移动距离：translateX()、translateY()

旋转

• 语法：transform:rotate(角度)
• 取值：正负均可
  • 角度单位 deg
  • 正值，顺时针转
  • 负值，逆时针转
  • 没有效果时需加过度：transition:all 2s;
• 旋转原点
  • transform-origin:原点水平位置 原点垂直位置; 改变旋转原点
  • 默认原点是盒子中心点
  • 取值：
    • 方位名词（left、top、right、bottom、center）
    • 像素单位数值
    • 百分比（参照自身盒子尺寸计算）
• 多重转换
  • 边走边转 transform:translateX(600px) rotate(360deg)
  • 不能拆开，拆开效果是，先位移，在旋转
  • 不能改变先后顺序，位移旋转绕盒子中心点，旋转改变X轴的方向

过度

• transition:哪些属性有过度效果 时间
• all 全部属性，都有过度效果
• transform，只让transform有过度效果

缩放

• 从中心点向四周缩放

• 语法：transform:scale(x轴缩放倍数,y轴缩放倍数)

• 取值：

  • 小于1，缩小
  • 大于1，放大

• 技巧

  • 一般情况下，只为scale设置一个值，表示X轴和Y轴等比例缩放
  • transform:scale(缩放倍数)

渐变

• 渐变是多个颜色逐渐变化的视觉效果

• 一般用于设置盒子的背景

• background-image:linear-gradient(
  颜色1,
  颜色2
  );
  
  background-image:linear-gradient(
  transparent,
  rgba(0,0,0,0.6)
  );
  

3D

• 空间：是从坐标轴角度定义的。x、y、z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同

位移

• 语法：transform:translate3d(x,y,z);
  • transform:translateX(值);
  • transform:translateY(值);
  • transform:translateZ(值);
• 取值
  • 正负均可
  • 像素单位数值
  • 百分比

透视

z 轴移动看不出来效果，使用perspective属性实现透视效果，可以看到z轴移动效果，近大远小的效果

• 属性添加给父级
• perspective:值
• 取值：像素单位数值，数值一般在 800~1200

旋转

• transform:rotateZ(值) 绕Z轴旋转

• transform:rotateX(值) 绕X轴旋转

• transform:rotateY(值) 绕Y轴旋转

• 取值：正负均可，单位 deg

• 左手法则：左手握住旋转轴，大拇指指向轴正值方向，四指弯曲方向为旋转正值

• transform:rotate3d(x,y,z,角度)：用来设置自定义旋转轴的位置及旋转角度，z、y、z取值0~1之间的数字

立体呈现

• 父级添加属性transform-style:preserve-3d;
• 使子元素处于真正的3d空间，按需设置子元素盒子的位移或旋转
• 旋转父级，会使3d空间旋转

缩放

• transform:scale3d(x,y,z)
• transform:scaleX(倍数)
• transform:scaleY(倍数)
• transform:scaleZ(倍数)

CSS3动画

animation添加动画效果，实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）

• animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态;
  • 动画名称、动画时长 必须赋值
  • 取值不分先后顺序
  • 如果有2个时间值，第一个表示动画时长，第二个表示延迟时间
• animation: 动画1,动画2…; 多个动画

/*定义动画*/
@keyframes 动画名称{
    from {}
    to {}
}

/*百分比：指的是在总时长中的占比*/
@keyframes 动画名称{
    0% {}
    10% {}
    100% {}
}

/*使用动画*/
animation: 动画名称 动画时长;

.box{
    width:200px;
    height:100px;
    animation:change 1s;
}

@keyframs change{
    0%{
        width:200px;
    }
    50%{
        width:500px;
        height:300px;
    }
    100%{
        width:800px;
        height:800px;
    }
}