h5c3 part5 background and transform

一.背景图
backgroung-repeat :
　　1.round : 缩小之后平铺
　　2.space : 不会缩小, 会在背景图之间产生间距
background-attachment:
　　滚动浏览器页面
　　1.fixed: 视差滚动(国外网站用的比较多)
　　2.scroll:
　　滚动内容
　　1.local:
　　2.scroll:
　　background-position:

　　background-image:url()

background-size: 1.300px 设置一个值, 另一个值等比自动设置
　　2.设置百分比, 不以图片大小为参照,而是以父容器宽度为参照
　　3.contain 自适应容器宽高中的较小值(是图片在容器中全部显示 , 容器可能有空白)
　　4.cover 自适应容器宽高中国的较大值(图片覆盖容器全部, 图片可能显示不全)

　　background-origin: content-box padding-box border-box 背景图片从哪里开始设置
　　background-clip: content-box padding-box border-box 设置的是背景裁切, 控制的是背景显示

　　background: url() no-repeat center/cover

二.2d动画

　　1.transition: 动画对象 动画时间 时间函数 动画速度(或者step(4))
　　transition有严格的要求,必须是有具体值的属性才能做动画

　　*display不能做动画, 因为只有显示和不显示
　　opacity可以做动画

2. 移动 transform: translate(400px,500px) ; x轴,y轴
　　translateX(-300px) ; 不加X或Y , 默认X轴方向
　　以自身左上角为移动原点

3. 缩放 transform: scale(2,1) x方向放大两倍, y方向放大一倍; 一个参数x/y方向等比缩放
　　tips: 以自己的中心点为坐标,缩放的时候不会影响周边的元素

4. 旋转 transform: rotate(-30deg) :
　　1. 默认围绕z轴旋转
2. 只要一个参数,负数为逆时针方向

　　transform-origin : top left; || (30px 40px)
　　transform:none; 清除

5. 扭曲 transform: skew(-30deg, 30deg)
　　正数, 沿着当前轴的逆时针方向扭曲, 反之顺时针方向,只扭曲,不移动

6. 多个transform叠加, 空格连接
　　transform: scale(2) rotate(30deg)

　　tips: rotate会将坐标系移动, 所以rotate应该放在其他属性后面

***7. translate让元素居中 left: 50%; top: 50% ; transform: translate(-50%, -50%)
　　定位的百分比以父容器的宽度为标准
　　translate的百分人以移动元素的宽度为标准

三. 3d动画
transform: translate3d(x,y,z);
　　或者translateX() translateY() translateZ()

transform: scale3d(x,y,z)
　　或者scaleX()

transform: rotate3d(1,2,3, 30deg) 旋转轴

　　立方体: 景深透视;
　　旋转角度和方向: 左手原则(电磁感应)
　　开启3的效果: transform-style : perserve 3d(保留3d位置)
　　透视距离: perspective:200px; (默认为宽高的一半)
　　透视坐标: perspective-origin: 100px 100px ; (x和y轴方向)