CSS 2D&3D转换与动画
字体图标
-
字体图标展示的是图标，本质是字体
-
处理简单的，颜色单一的图片，使用字体图标
-
使用：
-
下载：https://www.iconfont.cn/
-
引入字体图标样式表
-
对应标签上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;
}
}
