CSS学习笔记--3D转换模块和背景

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前端+跨平台开发》