CSS学习笔记–3D动画模块和背景属性
一、3D动画模块
1.什么是2d和什么是3d
2d就是一个平面，只有高度和宽度，没有厚度
3d就是一个立体，有高度和宽度，还有厚度
默认情况下所有的元素都是呈2d展示的
2.如何让某个元素呈3d展现
和透视一样，想看到某个元素的3d属性效果：只要给他的父元素添加一个 transform-style：prescrve-3d 即可；
注意点：
1 .只要父元素被拉伸了，子元素也会默认被拉伸；
2.填满整个网页设置（比如背景图片)：background-size:cover;
3.动画中如果有和默认样式同名的属性，会覆盖默认样式中同名的属性
4.在编写动画的时候（写某个属性需要变化的范围大小时），固定不变的值写在前面，需要变化的值写在后面
二、背景属性
1.什么是背景尺寸属性
背景尺寸属性是CSS3中新增的一个属性，专门用于设置背景图片的大小。
具体像素： background-size: 100px 200px;(可能会变形)
百分比：background-size: 50% 80%（会变形）
等比拉伸：background-size: auto 100px;（不变形） ，设置宽/高，则另一个设为自动，这样就不变形
2.其他背景相关的属性
（1）background-size: cover;
cover的含义
1、告诉系统图片需要等比拉伸
2、图片需要拉伸到宽度和高度都要填满元素
（2）background-size: contain;
contain的含义
1.告诉系统图片需要等比拉伸
2.告诉系统宽度或者高度都填满元素
（3）告诉系统背景图片从什么区域开始显示，默认情况下是从padding区域开始显示；
Backgroun-origin: padding-box;
Background-origin: boder-box;
Background-origin: content-box; (即从内容区域开始显示)
（4）背景绘制区域属性是专门用于指定从哪个区域开始绘制背景的，默认情况下会从boder区域开始绘制背景；
Background-clip: padding-box;;
Background-clip: boder-box;
Background-clip: content-box; (即从内容区域开始绘制)
（5）多张背景图片用逗号隔开，先写的背景会盖住后写的背景；
多张背景推荐拆开编写（即，属性类型拆开写，不写成简写格式）：
background-image: url(), url();
background-repeat: no-repeat, no-repeat;
background-position: left top, right top;
===笔记内容来自于《从零玩转HTML5前端+跨平台开发》