2D
二维的平面空间，让元素在X轴或者Y轴进行变化
2D里面的功能函数
2D-位移
2D-旋转
2D-缩放
2D-倾斜
变形属性
transform：；
位移：transform：translate（）；
旋转：transform：rotate（）；
缩放：transform：scale（）；
倾斜：transform：skew（）；
2D位移
transform：translate（x，y）
X在x轴移动的位置
Y在y轴移动的位置
transform：translateX（）或者Y（）
透明属性：
opacity：
属性值：0-1的数值
0是全透明
1是不透明
2D旋转
transform：rotate（deg）；
绕着x轴旋转：transform：rotateX（）；
绕着y轴旋转：transform：rotateY（）；
2D缩放
transform：scale（）；
如果scale括号里面一个值的时候整体缩小或者放大
如果括号里面2个值的时候第一个x轴缩小或者放大第二个y轴缩小或者放大
括号内部参数设置0-0.9999缩小 大于1就是放大
2D倾斜：
transform：skew（）；
transform：skewX（deg）
transform：skewY（deg）
transfrom：skew（30deg）
变形原点：
改变变形原点的位置：
transform-origin：X Y；
X横向的位置 y纵向的位置
接受的值：
X Y
left center
right top
50% 50%
10px 10px
左右 上下
多个功能函数使用的时候
尽量先写位移再旋转
尽量先写位移再写缩放
让元素的背面不可见
background-visibility：hidden；
Css选择符：
目标伪类选择器：
语法：
元素：target{
当前元素，被超链接指向的时候，执行的样式
}
大图定位fixed固定定位
圆角的实现
border-radius：50%；
景深
模拟近大远小的视觉效果
perspective：；值越大表示离得越远
通常指在900-1200之间，放在父元素上面
perspective-origin：；控制视角
left top 往左上角看
right top 右上角
3D：立体空间
多了个Z轴 形成一个3D空间
transform-style：preserve-3D；（放在父元素上面）默认值falt
transform：translateZ（）；
正值向前 负值向后
3D旋转：
transform：rotate3d（x，y，度数）
transform：rotateZ（）
参数x，y，z是一个矢量值
0代表不旋转 ，1 代表旋转
解释x，y，z矢量值，绘制一个点，绘制出得这个点和变形原点形成一条线，这条线就是旋转的轴
旋转的正负值：
绕着X轴：
如果元素往后躺：正值 前趴：负值
绕着y轴：
右侧转 ：正值 左侧转：负值
Y轴位移：
向下移动：正值 向上移动;负值
X位移正负值：
右移：正值 左移：负值
Z轴位移
前移：正值 后移：负值
3D缩放
transform：scale3d（x，y，z）；
transform：scaleZ（）；
动画
不用任何事件触发，能自动执行
制作关键帧
语法：
@keyframes 关键帧名称 {
from{}
to{}
}
常用方法：
@keyframes 关键帧名称 {
0%{
动画开始状态
}
100%{
动画结束状态
}
}
调用关键帧：
anmiation：复合属性（简写形式）；
调用关键帧的名称
anmiation-name
关键帧名称
动画执行的时间（s，ms）
动画的延迟时间
动画的类型：（linear（匀速））step-start
动画的次数：直接写次数 无限循环（infinite）
动画的方向：反向运动（reverse）
交替运动（alternate）
先正后反（alternate-reverse）
动画的状态：
animation-play-state：；
running 运动
paused 暂停
让动画停在最后一帧：
forwards
steps（参数1，参数2）
参数1：把动画分为几个阶段
参数2：end/start 默认是end
border-radius：100%； 正圆
box-shadow：；阴影
浙公网安备 33010602011771号