1.2-9CSS3盒模型、2d、3d、动画

CSS3 盒模型

了解 box-sizing 属性

CSS3 中可以通过 box-sizing 来指定盒模型，这样我们就可以设置如何计算一个元素的总宽度和总高度。

属性值	简介
content-box	默认值，标准盒子模型，盒模型是外扩的。 width 与 height 只包括内容的宽和高。 在 width 和 height 之外绘制元素的内边距和边框。
border-box	怪异模式，盒模型是内减的。 width 和 height 属性包括内容，内边距和边框，但不包括外边距。 为元素指定的任何内边距和边框都将在已设定的 width 和 height 内进行绘制。

content-box 标准模式

Standard 模式：标准模式中，盒子总体大小为 width(height) + padding + border，内容区域是 width 和 height 部分。

border-box 怪异模式

• Quirks 模式：怪异模式中，盒子总体大小为 width 和 height，添加了padding和border后，内容区域会收缩。

CSS3 新增属性

边框圆角

• 属性名：border­radius
• 作用：设置边框的圆角。
• 属性值：可以是像素值，或者百分比，百分比参考的是盒子整体宽度、高度的百分比。

属性值	说明
x-radius / y-radius	/ 分割两部分属性值，前面为水平半径，后面为垂直半径，得到的是椭圆角。
radius	一个属性值，则水平和垂直都设置为同一个值，得到的是圆角

单一属性

• border-top-left-radius: 半径;
• border-top-right-radius: 半径;
• border-bottom-right-radius: 半径;
• border-bottom-left-radius: 半径;

简写方法

• border-radius 相当于四个单一属性的简写方法，类似 padding 也可以有四种值的写法。
• border-radius: 左上角 右上角 右下角 左下角;
• border-radius: 左上角 右上角和左下角 右下角 ;
• border-radius: 左上角和右下角 右上角和左下角 ;
• border-radius: 四个角相同;

/ 的属性值写法

border-radius 属性值中出现了 / 斜线，那么 / 前面可以设置水平方向四种值的写法，/ 后 面可以设置垂直方向四种值的写法。

浏览器兼容

Internet Explorer 8 及以下版本浏览器不支持border-radius属性，其他浏览器都支持。

文字阴影

在 CSS3 中，text-shadow 可向文本应用阴影。通过属性值能够规定水平阴影、垂直阴影、 模糊距离，以及阴影的颜色：

属性值	简介
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊的距离。
color	可选。阴影的颜色。

文字阴影语法

text-shadow 属性向文本添加阴影，属性值有2-3个长度值和一个可选的颜色值进行 规定，省略的长度是 0。

多层阴影

text-shadow 属性也可以向文本添加多个阴影，逗号分隔多个阴影的属性值。 注意：多阴影中，先写的阴影压盖在后写的阴影上。

盒子阴影

边框阴影

在 CSS3 中，box-shadow 属性用于对盒子边框添加阴影。

属性值	简介
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离。
spread	可选。阴影的尺寸。
color	可选。阴影的颜色。
inset	可选。将外部阴影改为内部阴影。

边框阴影语法

box-shadow 属性向盒子添加阴影，属性值有2-4 个长度值、可选的颜色值以及可选 的 inset 关键词来规定，省略的长度是 0。

多层阴影

box-shadow 属性也可以向盒子添加多个阴影，逗号分隔多个阴影的属性值。 注意：多阴影中，先写的阴影压盖在后写的阴影上。

动画效果

• SS3 出现之前，前端一般使用 Flash 动画或 JavaScript 制作动画。
• 帧动画：通过一帧一帧的画面按照固定顺序和速度播放，如电影胶片。

过渡属性

属性名：transition
作用：在不使用 Flash 动画或 JavaScript 的情况下，使用 transition 可以实现补间动画（过渡效果），并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指），那么A和B之间就可以实现平滑的过渡的动画效果。为了方便看效果，我们使用 :hover 切换状态。
语法格式：
transition: 过渡的属性 过渡时间 运动曲线 延时时间;
单一属性写法:

属性	描述
transition	简写属性，用于在一个属性中设置四个过渡属性。
transition-property	规定应用过渡的 CSS 属性的名称。
transition-duration	定义过渡效果花费的时间。默认是 0。
transition-timing-function	规定过渡效果的时间曲线。默认是 “ease”。
transition-delay	规定过渡效果何时开始。默认是 0。

transition-property过渡的属性

• none 表示没有属性过渡
• all 表示所有变化的属性都过渡
• 属性名 使用具体的属性名，多个属性名中间逗号分隔

时间

• 过渡时间：以s秒为单位。
• 延时时间：以s秒为单位。0s也必须加单位。

transition-timing-function 时间曲线

值	描述
linear	全程匀速的过渡效果
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果
ease-in	规定以慢速开始的过渡效果
ease-out	规定以慢速结束的过渡效果
ease-in-out	规定以慢速开始和结束的过渡效果
cubic-bezier(x1,y1,x2.y2)	在cubic-bezier函数中定义自己的值。x1、x2取0至1之间的数值，y1，y2取值任意，四个值表示拉扯的点的两个坐标。

贝塞尔曲线

浏览器兼容

• Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。
• Safari 需要前缀 -webkit-。
• 注意：Internet Explorer 9 以及更早的版本，不支持 transition 属性。

2D 转换

• 属性名：transform
• 作用：对元素进行移动、缩放、旋转、拉长或拉伸。配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。
• 属性值：多种转换方法的属性值，可以实现不同的转换效果。

位移 translate()

transform 的属性值为 translate() 时，可以实现位移效果。

书写语法：

值	说明
translate(x,y)	x,y分别为水平和垂直方向位移的距离，可以为px值或百分比， 区分正负
translate(x)	只有一个数值，表示水平方向的位移

缩放 scale()

transform 的属性值为 scale() 时，可以实现元素缩放效果。

书写语法：

值	说明
scale(x, y)	x,y分别为改变元素的宽度和高度的倍数
scale(n)	只有一个值，表示宽度和高度同时缩放n倍
scaleX(n)	改变元素的宽度
scaleY(n)	改变元素的高度

旋转 rotate()

transform 属性值设置为 rotate() 时，实现元素的旋转。

书写语法：
rotate(数字deg)
其中，deg为度数单位，正数表示顺时针旋转，负数表示逆时针旋转。2D的旋转只有 一个属性值。
注意：元素旋转后，坐标轴也跟着发生转变。
因此，多个属性值同时设置给 transform 时，书写顺序不同导致的转换效果有差异。

倾斜 skew()

transform 属性值设置为 skew() 时，实现元素的倾斜。

书写语法：
transform: skew(数字deg,数字deg);
两个属性值分别表示水平和垂直方向倾斜的角度，属性值可以为正可以为负，第二个数值不写默认为0

transform­origin 属性

• 作用：设置调整元素的水平和垂直方向原点的位置。
• 调整元素的基准点。

属性值：包含两个，中间使用空格分隔。

值	说明
x	定义 X 轴的原点在何处。可能的值：left 、center、right、像素值、百分比
y	定义 Y 轴的原点在何处。可能的值：top、center、bottom、像素值、百分比

3D 转换

transform 属性不止能实现 2D 转换，也可以制作 3D 立体转换效果，比普通的 x、y 轴组成 的平面效果多了一条 z 轴

透视

电脑显示屏是一个 2D 平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现， 通过透视可以实现此目的。
透视可以将一个 2D 平面，在转换的过程当中，呈现 3D 效果。
透视特点：近大远小。
注意：并非任何情况下需要透视效果，根据开发需要进行设置，如果需要展示 z 轴的变化， 则设置透视效果。

透视属性 perspective

属性名：perspective
作用：设置在 z 轴的视线焦点的观察位置，从而实现 3D 查看效果。
属性值：像素值，数值越大，观察点距离 z 轴原点越远，图形效果越完整且接近原始尺寸。
注意：透视属性需要设置给 3D 变化元素的父级。

3D 旋转

3D旋转比2D旋转更复杂，需要分别对三个方向的旋转角度值：

属性值：

值	说明
rotateX(angle)	定义沿着 X 轴的 3D 旋转。
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。

注意：属性值的角度区分正负，正数表示沿对应坐标轴顺时针方向旋转，负数表示沿对应坐标轴逆时针 方向旋转

3D 位移

类似的，位移也分为三个方向的移动:
属性值：

值	说明
translateX(x)	设置 X 轴的位移值。
translateY(y)	设置 Y 轴的位移值。
translateZ(z)	定义3D位移，设置Z轴的位移值。

属性值为像素值或百分比，正负表示位移的方向。正值向对应轴的正方向移动，负值向对应 轴的负方向移动。

3D 正方体案例

transform-style属性

用于设置被嵌套的子元素在父元素的 3D 空间中显示，子元素会保留自己的 3D 转换坐标轴。
属性值：
flat：所有子元素在 2D 平面呈现 preserve-3d：保留 3D 空间
3D 元素构建是指某个图形是由多个元素构成的，可以给这些元素的父元素设置 transform-style: preserve-3d，来使其变成一个真正的 3D 图形。
一般来说，该属性设置给 3D 变换图形的父级元素。

浏览器兼容

Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。
Chrome 和 Safari 需要前缀 -webkit-。
Internet Explorer 9 需要前缀 -ms-。

动画

css3 中提供了自己的动画制作方法，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

css3 动画制作分为两步：创建动画、绑定动画。

@keyframes 规则

@keyframes 规则用于创建动画。
在 @keyframes 中规定某项 CSS 样式，就能创建由从一种样式逐渐变化为另一种样式的效果。
可以改变任意多的样式任意多的次数。
需要使用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。

@keyframes 书写方法

@keyframes 动画名称 {动画过程，可以添加任意百分比处的动画细节}

animation 属性

需要将 @keyframes 中创建的动画捆绑到某个选择器，否则不会产生动画效果。 animation 属性用于对动画进行捆绑。
语法：
div { animation: 动画名称 过渡时间 速度曲线 动画次数 延时时间； }
其中必须设置动画名称和过渡时间，其他属性值可以根据需求设置。

单一属性列表

属性	描述
animation-name	规定 @keyframes 动画的名称。
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation­timing-function	规定动画的速度曲线。默认是 “ease”。
animation­delay	规定动画何时开始。默认是 0。
animation­iteration-count	规定动画被播放的次数。默认是 1。infinite表示无限次播放。

浏览器兼容

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。 Chrome 和 Safari 需要前缀 -webkit-。
Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。