css3属性特效： 2d位移：transform：translateX x轴位移 单位是px transform：translateY y轴位移 同时写会被覆盖，所以用复合属性写 复合属性：transform：translate（100px，100px）第一个是x轴参数 第二个是y轴参数 起始点：00点，边框的左上角的顶点 transform：translate（100px 0，） x轴距离左边100px transform：translate（ 0，100px） y轴距离左边100px
2d缩放：transform：scale（2）写一个值代表x和y轴值都是2一样， 单位是数字 缩放一个值缩小的时候从中心点缩小 scaleX表示在x轴方向变大。高度不变 scaleY表示在y轴方向变大，宽度不变 transform：scale（1）表示本身，不变 transform：scale（0.5）小于1表示缩小 transform：scale（0）表示缩小到消失 transform：scale（2.1）xy的值变化的话，只放大x轴 transform：scale（1.2）只放大y轴
2d倾斜：transform：skew（ax，ay） 表示x轴倾斜角度，y轴倾斜角度 单位是度数值deg 度数的单位是deg x轴会改变宽度，y轴会改变高度 transform：skew（60deg，20deg）第一个表示x轴，按照逆时针方向进行旋转，宽度变化，高度不变 第二个表示y轴，按照顺时针方向进行旋转，高度变化，宽度不变
2d旋转：rotate（）单位也是deg 参数a取正值时元素相对原来中心点顺时针旋转，类似手绢的中心点旋转
transform：rotateX（）沿着x轴变化 改变高度
transform：rotateY（）沿着y轴变化 改变宽度
transform：rotate（30deg）只能设一个值，沿着中心点顺时针旋转
倾斜于旋转区别，旋转不会改变大小，旋转会改变
transforw的值有四个属性，如果改变形状，将四个属性中都放在transforw里写，用空格隔开，分开写会 被覆盖transform：rotate（30deg） skew（）scale（）translate（）
css过渡
transition呈现是一样过渡，是一种动画转换的过程，比如渐现，渐弱，动画快慢等 transition：过渡属性 过渡时间 过渡速度 延迟时间（点鼠标会在等会在变动） transition—property：过渡属性 一般为了方便使用transition—all
过渡效果： transition:all 2s liner .5s
width: 200px;
height: 200px;
border-radius: 50%;
margin: 400px 0px;
background-color: greenyellow;
/* 加上过渡效果 */
transition: all 1s linear 0s;
/* 属性，动画时间，运动速度，延迟时间 */
/* linear 匀速 */
/* ease-in 慢速开始 */
/* ease-out 慢速结束 */
/* ease-in-out 慢速开始和结束 */
div:hover{
/* 自身的位置就是(0,0)*/
/* translate是结合自身的位置 */
transform:translate(500px,-200px);
}
位移缩放倾斜旋转
/* 2D位移，同时写会被下面的覆盖 */
/* 起始点在屏幕左上角 */
/* transform: translateX(100px);
transform: translateY(100px); */
/* 复合属性：第一个表示X轴第二个表示Y轴 */
/* transform: translate(100px,100px); *//* X轴距离左边100px */
/* 缩放属性 */
/* transform: scale(2); */
/* 1个值表示X和Y轴同时变化 ，2个值时X轴 和 Y轴 */
/* scale(.5) 代表缩小 */
/* 缩小的时候从中心点开始 */
/* scaleY(2) 沿Y轴变化，宽度不变 */
/* scaleX(2) 沿X轴变化，高度不变 */
/* scale(1) 代表本身，不变化 */
/* scale(0) 代表缩小到消失*/
/* 倾斜属性 */ /* 倾斜角度单位：deg */
/* transform: skew(20deg,0deg); */
/* 第一个值代表X轴，逆时针方向旋转 宽度变化，高度不变*/
/* 第二个值代表Y轴，顺时针方向旋转 高度变化，宽度不变*/
/* 旋转属性 */ /* 旋转角度单位：deg */
/* transform: rotateX(15deg); */
/* 沿着X轴旋转 会改变高度*/
/* transform: rotateY(15deg); */
/* 沿着Y轴旋转 会改变宽度*/
transform: rotate(30deg);
/* 只设置一个值，表示沿着中心点顺时针转，不改变 */
....
