第6章 实现CSS3动画-【千锋教育】HTML5+CSS3+JavaScript 网页设计基础与实战（微课版）

第6章实现CSS3动画 >6.1实现2 D transform转换 >6.2制作animation动画 >6.3实现transition:过渡和3D转换 学习目标 LEARNING OBJECTIVES 了解CSS3动画 掌握CSS3中2D和3D的transform转换 掌握CSS3中的transition过渡 掌握CSS3中的animation动画 初心至善匠心有人 引言 在早期的Web设计中，通常依赖于Flash或JavaScript脚本来实现网页中 的动画或特效。而CSS3提供了对动画的强大支持，CSS3动画包括transform 转换、animation动画和transition过渡3大模块，transform转换可对网页元素 进行转换操作，animation动画可实现帧动画的效果，transition过渡可实现CSS 属性的过渡变化，CSS3动画的应用极大的带动了网页设计的灵活性。 6.1 实现2 transform转换 transform-origin属性 translate0位移 rotate0旋转 目录 Contents scale(0缩放 skew0倾斜 案例一清凉夏日主题宣传 初心至善匠心有人 6.1实现2 D transform转换 6.1.1 transform-origin属性 在CSS3中，2D转换是使用transform属性来实现文字o或图像的各种转换效果，如位移、 旋转、缩放、倾斜等转换方法。这些转换方法的使用，让网页效果更丰富，提升了用户的 体验感。 CSS3中位移、转、缩放和倾斜都是默认以元素的中心原点进行转换，可通过 transform-origin属性设置原点的位置，一旦中心原点改变，转换的效果就会不样。 语法格式 transform-origin属性可用来设置transform转换的原点位置。默认情况下， 原点位置为元素的中心点。transform-origin,属性的语法格式如下所示。 transform-origin属性的语法格式如下。 transform-origin:x-axis y-axis z-axis; 6.1实现2 D transform转换 6.1.1 transform-origin属性 属性值 transform-origin属性可取值位置、 百分数a或即x值，上述语法格式中，属性值的具 体说明如6.1所示。 名称 说明 值 X-axis X轴原点坐标 位置(let,center、right)/百分数/px值 y-axis Y轴原点坐标 位置(top、center、bottom)/百分数/px值 Z-axis Z轴原点坐标数值 transform-origin:left bottom:/transform-origin:50%30%/transform-origin:20px 40px; 由于2D转换没有Z轴，transform-originl属性坷不设置zZ轴的值。 6.1实现2 D transform转换 6.1.2 translate0位移 translate0位移是2D转换的一种位移方法。translate0方法用于元素位移操 作，在CSS3中，可以使用translate(0方法将元素沿着水平方向(X轴)和垂直方向 (Y轴)移动。translate(0方法与relative相对定位相似，元素位置的改变不会影 响到其他元素。 语法格式 translate(0位移的语法格式如下。 transform:translate(x,y); 或者分开写 transform:translateX(n); transform:translateY(n); 6.1实现2 D transform转换 6.1.2 translate0位移 translate(0位移可以改变元素的位置，以自身位置为基准进行移动，其值可为正数a或 负数，单位是px(像素)或%（百分比）。translate(0位移方法可分为3种情况，具体说 明如表所示。 translate()方法 说明 translate(x,y) 元素在水平方向(X轴)和垂直方向(Y轴)同时移动 translateX(n) 元素在水平方向（轴）移动，n值为正数时，以自身位置为基准向右移动 translateY(n) 元素在垂直方向(Y轴)移动，n值为正数时，以自身位置为基准向下移动 原心的改变对于位移没有任何效果。 6.1实现2 D transform转换 6.1.3 rotate0旋转 rotate(0转是2D转换的一种旋转方法。rotate0方法用于元素旋操作，在 CSS3中，可以使用rotate(0方法将元素相对于原点进行转。 语法格式 rotate(0旋转的语法格式如下。 transform:rotate(度数： 6.1