03-13
倾斜：skew（），让元素倾斜显示
transform：skew（水平倾斜）；
transform：skew（水平，垂直）；
transform：skewX（）；
transform：skewY（）；
目标伪类选择器：
选择器 ：target{} 当元素被点击时的指向，发生样式的改变
css圆角：border-radius：50%；/*圆角*/
元素是正方形 宽度的一半px % 都为正圆
元素是长方形 较小值得一半px 半圆
50% 椭圆
3D
background：rgba（红,绿,蓝,透明度）/*元素背景颜色透明*/a是背景颜色透明度（范围0~1）
CSS3
景深（前提是3D空间）：观察物体的时候 近大远小，perspective：；
给父级元素添加：
形成3D的空间：transform-style：preserve-3d；
添加景深形成近大远小的效果：perspective：；一般是900px-1200px
观察3d元素的角度：
设置观察点的位置perspective-origin：；
left right px
top bottom
3D中的Z轴是人对屏幕垂直的视线，靠近屏幕的方向就是正向，远离屏幕视线是反向。
3D功能函数：
3D位移：translateX() translateY() translateZ()
3D旋转：rotateX（） rotateY（） rotateZ（）
3D缩放：scaleX（） scaleY（） scaleZ（）
背面不可见：backface-visibility：hidden；
过渡：transtion：； 需要事件触发
动画：animation 不需要事件触发，使用关键帧就可以执行
调用关键帧 animation：mz 1s；
animation-name：；关键帧名字 动画名
animation-duration：s；关键帧时长 总运动时间
animation-delay：s；关键帧延迟时间
animation-iteration-count：；运动运行次数（默认是一次），
写成数字时是多少次，写成infinite时无线循环
animation-direction：；运动方向，默认顺时针
reverse 反向运动（逆时针）
alternate 先正向再反向，单数次为顺时针，双数次为逆时针。
alternate-reverse，先反向再正向，单数次为逆时针，双数次为顺时针。
animation-timing-function：；（速度）运动使用的类型（加速 减速 贝塞尔曲线运动.....）
linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
step-start:马上跳到动画每一结束桢的状态
animation-play-state：；检索或设置对象动画的状态 需要结合hover
running 运动
paused 暂停
animation-play-state:paused; 当鼠标经过时动画停止，鼠标移开动画继续执行
综合写法：animation：名字 运动时间 速度 延迟时间 次数；运动时间和延迟时间不能写反
定义动画：
@keyframes mymove{
from{初始状态属性}
to{结束状态属性}
}
或者@keyframes mymove{
0%{初始状态属性}
50%（中间再可以添加关键帧）
100%{结束状态属性}
}