2021-05-12

广东信息科技职业培训学院

广信IT学院

技术文献总结装订册

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~文献目录

顺序	文献编号	文献类型	题目	开发工具	关键技术
01		专题技术文献	CSS变形与动画之transform	DW	CSS
02

备注：“文献编号”由学院工作人员填写；文献类型填写“专题技术”或“项目研发”

 

广东信息科技职业培训学院编制

 

 

 

评  分

文献总分：        折算后标准分：       阅卷教师签名

 

（有效）专题技术文献评分

序 号	题目	各项评分				文献 得分
		主题 深浅 （20）	描述 清晰 （40）	图文 搭配 （20）	分享 评定（20）
01	CSS的变形与动画之transform
02
专题技术文献平均分：   文献数量加分：      篇x10分/篇=     分 专题技术文献总分：

项目研发文献评分

序 号	题目	各项评分				文献 得分
		业务模块数量 （20）	模块复杂度 （30）	图文 描述 （30）	分享 评定（20）
01
02
项目研发文献平均分：   文献数量加分：      篇x10分/篇=     分 项目研发文献总分：

 

备注：

1、分享评定：发表到指定的3个网站，成功1个加5分，成功2个加10分，成功3个加20分。

2、实际总分=专题技术文献平均分+项目研发文献平均分*3。

3、所有文献必须提交对应的程序源码和项目演示视频，按照表格题目命名，放在同一个文件夹。

4、文献和源码、视频等文件，统一放到一个文件夹里面并提交给班长，文件夹命名格式如：

“广信IT17-1张悦190119文献与源文件”。

                          transform

----transform 属性向元素应用2D或 3D转换。该属性允许我们对元素进行旋转，缩放，移动或倾斜。

1. 旋转 rotate(n)

旋转函数rotate()通过指定的角度参数使元素相对原点进行旋转；

N为参数，用于设置旋转的角度，如果为正，元素相对原点中心顺时针旋转；如果为负，逆时针旋转。

例：

 

 

(2)扭曲 skew（）

---元素倾斜显示， 将对象以其中心位置绕着X轴和Y轴按照一定的角度倾斜

3种使用情况：

Skew（x，y）元素同时在水平方向和垂直扭曲；

SkewX(x)元素仅在水平方向垂直；

例：

 

3.缩放scale（）

让元素根据中心原点对对象进行缩放

3种使用情况：

    Scale（x，y）使元素水平方向和垂直方向同时缩放；

    ScaleX（x）元素仅水平方向缩放；

    ScaleY（y）元素仅垂直方向缩放；

注意：scale()的取值默认为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于等于1.01的值，作用让元素放大。

例：

 

（4）位移 translate

元素向指定的方向移动

3种情况：

Translate（x，y）水平方向和垂直方向同时移动；

TranslateX（x）仅水平方向移动；

TranslateY（y）仅垂直方向移动；

例：

 

（5）原点transform-origin

默认的元素的中心点居于元素X轴和Y轴的50%处；transform-origin的作用在于可以改变原点位置，使元素原点不在中心位置

取值：