Web前端开发技术
教案设计
项目课题
CSS动画设计
授课时间
授课对象
大学生
学习目标
1.了解CSS的变形效果及其应用。
2.了解CSS的过渡效果及其应用。
3.了解CSS的动画效果及其应用。
学习重点
了解CSS的变形效果及其应用。
学习难点
了解CSS的过渡效果及其应用。
教学方法
讲授法、课堂演示法
教学用具
多媒体课件
教学流程
教学环节
教学内容
教学过程
任务一CSS变形
一、CSS变形属性transform
transform属性可以实现元素旋转、缩放、倾斜和移动这4种类型的变形处理。指定的元素可以是块级元素和内联元素,其基本语法格式如下。
{transform:none|变形函数;}
属性值设置为none时,元素不变形,还可以设置多个变形函数,用空格分离。变形函数有2D变形和3D变形的函数,可分别实现2D和3D变形的效果。
二、2D函数
1.2D旋转变形函数rotate()
2D旋转变形函数rotate()对指定的元素在二维空间内进行旋转,其基本语法格式如下。
{transform:rotate(旋转角度);}
旋转角度取值的单位可以为deg(度)、grad(梯度)、rad(弧度)或turn(圈)。
2.2D缩放变形函数scale()
2D缩放变形函数scale()对指定的元素在二维空间内进行缩放,其基本语法格式如下。
{transform:scale(缩放值);}
缩放值可以是正数或负数。正数是缩放的比例倍数,负数是翻转元素后再缩放的比例倍数。若缩放值为一个参数,则表示宽度和高度采用同样的缩放值;若缩放值为两个参数,则分别表示宽度缩放值和高度缩放值,用逗号分隔。
3.2D移位变形函数translate()
2D移位变形函数translate()对指定的元素在二维空间内进行坐标移位,其基本语法格式如下。
{transform:translate(坐标偏移值);}
坐标偏移值是水平和垂直方向相对于原位置偏移的距离。若坐标偏移值设一个参数,则表示设置水平偏移值,而垂直偏移值默认为0;若坐标偏移值设两个参数,则分别表示水平和垂直方向偏移值,用逗号分隔。正数表示向右或向下,负数表示向左或向上。
4.2D倾斜变形函数skew()
2D倾斜变形函数skew()对指定的元素在二维空间内进行倾斜显示,其基本语法格式如下。
{transform:skew(倾斜值);}
倾斜值是相对于坐标轴倾斜的角度。若倾斜值设一个参数,则表示相对于x轴的倾斜角度,而相对于y轴的倾斜角度默认为0;若倾斜值设两个参数,则分别表示相对于x轴的倾斜角度和相对于y轴的倾斜角度,用逗号分隔。倾斜和旋转不同,旋转不会改变元素形状,但倾斜会改变元素形状。
5.2D矩阵变形函数matrix()
2D矩阵变形函数matrix()可以实现多种变形效果。该函数有6个参数,经过矩阵计算实现变形效果,实现缩放和平移的基本语法格式如下。
matrix(x轴缩放值,0,0,y轴缩放值,x轴移动值,y轴移动值)
实现移位和旋转(θ)的基本语法格式如下。
matrix(cosθ,-sinθ,sinθ,cosθ,x轴移动值,y轴移动值)
三、2D变形原点属性transform-origin
CSS变形的原点默认是元素对象的中心点。transform-origin属性用于改变2D变形的中心点,其基本语法格式如下。
{transform-origin:x坐标y坐标;}
原点的x坐标和y坐标可以是百分比、数值(em、px)、方位词(left、center、right、top、middle、bottom)等。
四、3D函数
1.3D旋转变形函数rotate3d()
3D旋转变形函数rotate3d()对指定的元素在三维空间内进行旋转,可以分别用rotateX()、rotateY()、rotateZ()指定旋转的坐标轴,其基本语法格式如下。
{transform:rotate3d(x坐标,y坐标,z坐标,旋转角度);}
/*指定x、y、z坐标点旋转角度*/
{transform:rotateX(旋转角度);}/*沿x轴旋转*/
{transform:rotateY(旋转角度);}/*沿y轴旋转*/
{transform:rotateZ(旋转角度);}/*沿z轴旋转*/
2.3D缩放变形函数scale3d()
3D缩放变形函数scale3d()对指定的元素在三维空间内进行缩放,可以分别用scaleX()