第12章 CSS3变换、过渡和动画

Web前端设计基础—HTML5、CSS3、JavaScript 张树明编著
12.1 变换
1.transform坐标系统 如果没有使用transform-origin改变元素原点位置， CSS3旋转、缩放、倾斜和移动的变形操作都是以 元素中心位置进行的。若使用transform-origin改 变了元素原点位置，CSS3旋转、缩放和倾斜变形 操作以更改后的原点位置进行，但位移变形操作 始终以元素中心位置进行。
12.1 变换
4. transform-style transform-style指定某元素的子元素是位于三维 空间内，还是在该元素所在的平面内被扁平化。 语法如下：
transform-style：flat|preserve-3d
transform-style默认值是flat，当属性值为 preserve-3d时，元素将会创建局部堆叠上下文， 保证变换元素处在三维空间内，需要在变换元素 的父元素上定义transform-style属性。
Web前端设计基础—HTML5、CSS3、JavaScript 张树明编著
Web前端设计基础—HTML5、CSS3、JavaScript 张树明编著
12.1 变换
1.transform坐标系统 使用transform所参照的并不是初始坐标系统，而 是一个新的坐标系统，相比初始坐标系统，x、y、 z轴的指向都不变，但原点位置是元素的中心。如 果想要改变transform坐标系统的原点位置，可以 使用transform-origin，默认值是50% 50%。
Web前端设计基础—HTML5、CSS3、JavaScript 张树明编著
12.2 过渡
CSS3 过渡（Transition）是元素从一种样式逐渐 改变为另一种时的效果。通过CSS3过渡，可以不 使用JavaScript脚本，为元素从一种样式变换为 另一种样式时添加效果。CSS3过渡属性。
属性 transition transition-property transition-duration transition-timingfunction transition-delay 描述 简写属性，在一个属性中设置四个过 渡属性 规定应用过渡的CSS属性名称 规定过渡效果持续时间。默认是0 规定过渡效果时间曲线。默认是 "ease" 规定过渡效果何时开始。默认是0
Web前端设计基础—HTML5、CSS3、JavaScript 张树明编著
12.2 过渡
css3中transition允许css的属性值在一定的时间 内平滑地过渡，这种效果可以在鼠标单击、获得 焦点、被单击或对元素任何改变中触发，并圆滑 地以动画效果改变CSS的属性值。transition语法 如下：
transform-origin: x-axis y-axis z-axis;
transform-origin属性值可以使用关键字、长度和 百分比。transform-origin属性常用值。
值 x-axis y-axis z-axis 描述 定义视图被置于X轴的何处 left、center、right | length | % 定义视图被置于Y轴的何处 top、center、bottom | length | % 定义视图被置于Z轴的何处 Length
Web前端设计基础—HTML5、CSS3、JavaScript 张树明编著
12.1 变换
1.transform坐标系统 HTML元素是平面的，会有一个初始坐标系统，其 中，原点位于元素的左上角，z轴指向浏览者，初 始坐标系统的z轴并不是三维空间，仅仅是zindex的参照，决定元素的堆叠顺序，堆叠靠前 的元素将覆盖后面的。
第12章 CSS3变换、过渡和动画
渤海大学 张树明
内容提要
过去要在网页上实现一些动态和动画效果必须借 助脚本或第三方插件才能做到，用CSS3增加的变 换、过渡和动画样式属性现在可以轻松实现。
Web前端设计基础—HTML5、CSS3、JavaScript 张树明编著
本章要点
CSS3变换。 CSS3过渡。 CSS3动画
transition:[<'transition-property'>||<'transitionduration'>||<'transition-timingfunction'>||<'transition-delay'>[,[<'transitionproperty'>||<'transition-duration'>||<'transitiontiming-function'>||<'transition-delay'>]]*
translateX(n) translateY(n) rotate(angle) scale(x,y)
scaleX(n) scaleY(n) skew(x-angle,y-angle) skewX(angle) skewY(angle)
Web前端设计基础—HTML5、CSS3、JavaScript 张树明编著
Web前端设计基础—HTML5、CSS3、JavaScript 张树明编著
12.1 变换
通过CSS3 transform，能够对元素进行旋转、缩 放、倾斜、移动这四种类型的变换处理。CSS3变 换属性。
属性 transform transform-origin transform-style perspective perspective-origin backface-visibility 描述 向元素应用2D或3D变换 改变被变换元素的原点位置 被嵌套元素如何在3D空间中显示 3D元素的透视效果 3D元素的底部位置 元素在不面对屏幕时是否可见
ease：默认值，逐渐变慢。ease函数等同于贝塞尔曲线 (0.25,0.1,0.25,1.0)。 linear：匀速。linear函数等同于贝塞尔曲线(0.0,0.0,1.0,1.0)。 ease-in：加速。ease-in函数等同于贝塞尔曲线(0.42,0,1.0,1.0)。 ease-out：减速。ease-out函数等同于贝塞尔曲线(0,0,0.58,1.0)。 ease-in-out：加速然后减速。ease-in-out函数等同于贝塞尔曲 线(0.42,0, 0.58,1.0)。 cubic-bezier：允许自定义一个时间曲线， 特定的cubic-bezier 曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值 需在[0,1]区域内，否则无效。
Web前端设计基础—HTML5、CSS3、JavaScript 张树明编著
12.1 变换
2. transform transform设置元素的变换，语法如下：
transform: none|transform-functions;
transform-functions2D变换方法。
方法 mmatrix(n,n,n,n,n,n) translate(x,y) 描述 以一个含六个值的变换矩阵形式指定2D变换 2D移动。第一个参数对应X轴，第二个参数对应 Y轴。如果第二个参数未指 定，默认值为0 元素X轴（水平方向）移动 元素Y轴（垂直方向）移动 2D旋转，需先设置transform-origin属性 2D缩放。第一个参数对应X轴，第二个参数对应 Y轴。如果第二个参数未指 定，默认取第一个参数的值 元素X轴的（水平方向）缩放 元素Y轴的（垂直方向）缩放 倾斜。第一个参数对应 X轴，第二个参数对应 Y轴。如果第二个参数未指定， 默认值为0 元素X轴的（水平方向）倾斜 元素Y轴的（垂直方向）倾斜
Web前端设计基础—HTML5、CSS3、JavaScript 张树明编著
12.1 变换
2. transform 实例CSS3(3Dtransform).html说明了3D变换方法 的使用。
Web前端设计基础—HTML5、CSS3、JavaScript 张树明编著
12.1 变换
3. transform-origin transform-origin设置元素以某个原点进行转换。 语法如下：
Web前端设计基础—HTML5、CSS3、JavaScript 张树明编著
12.1 变换
3. transform-origin 2D变换的transform-origin属性可以是一个参数 值，也可以是两个参数值。如果是两个参数值时， 第一值设置水平方向X轴的位置，第二个值是用 来设置垂直方向Y轴的位置。如果只提供一个，该 值将用于横坐标，纵坐标将默认为50%。默认值： 50% 50%，效果等同于center center。 3D变换的transform-origin属性还包括了Z轴的第 三个值z-axis，用来设置3D变换中transformorigin远离用户眼睛视点的距离，默认值为0，其 取值可以<length>，不过<%>在这里将无效。
12.1 变换
2. transform 实例CSS3(2Dtransform).html说明了2D变换方法 的使用。
Web前端设计基础—HTML5、CSS3、JavaScript 张树明编著
12.1 变换
2. transform 3D变换方法。
方法 matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) translate3d(x,y,z) translateX(x) translateY(y) translateZ(z) scale3d(x,y,z) scaleX(x) scaleY(y) scaleZ(z) rotate3d(x,y,z,angle) rotateX(angle) rotateY(angle) rotateZ(angle) perspective(n) 描述 以一个4x4矩阵的形式指定一个3D变换 3D移动。第1个参数对应X轴，第2个参数对应Y轴，第3 个参数对应Z轴，参数不允许省略 元素X轴上移动 元素Y轴上移动 元素Z轴上移动 3D缩放。第1个参数对应X轴，第2个参数对应Y轴，第3 个参数对应Z轴，参数不允许省略 元素X轴上缩放 元素Y轴上缩放 元素Z轴上缩放 3D旋转，其中前3个参数分别表示旋转的方向 x,y,z，第4 个参数表示旋转的角度，参数不允许省略 元素X轴上旋转 元素Y轴上旋转 元素Z轴上旋转 透视距离
Web前端设计基础—HTML5、CSS3、JavaScript 张树明编著
1ຫໍສະໝຸດ Baidu.1 变换
3. transform-origin 实例CSS3(transform-origin).html说明了 transform-origin属性的使用。
Web前端设计基础—HTML5、CSS3、JavaScript 张树明编著
2.transition-duration 变换持续的时间，规定完成过渡效果需要花费的 时间（以秒或毫秒计），默认值0没有效果。
Web前端设计基础—HTML5、CSS3、JavaScript 张树明编著
12.2 过渡
3.transition-timing-function 在持续时间内变换的速率。有六个值：
Web前端设计基础—HTML5、CSS3、JavaScript 张树明编著
12.1 变换
4. transform-style 如果父元素定义了transform-style: preserve-3d; 属性，则所有子元素都处于同一个三维空间内。 实例CSS3(transform-style).html说明了 transform-style属性的使用。
transition主要有四个属性值。
Web前端设计基础—HTML5、CSS3、JavaScript 张树明编著
12.2 过渡
1.transition-property 执行过滤的属性，属性规定应用过渡效果的CSS 属性名称。（当指定的CSS属性改变时，过渡效 果将开始）。有三个值：
none：没有属性会获得过渡效果。 all：所有属性都将获得过渡效果。 ident：指定要进行过渡的css属性列表，列表以逗号 分隔。