开发者学堂课程【前端开发CSS基础：CSS 动画效果——2D 】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/361/detail/4268
CSS 动画效果——2D
内容介绍
一、2D、3D 转换介绍
二、使用代码详细讲解
三、浏览器内核
一、2D、3D 转换介绍
（1）通过 2D、3D 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。
（2）转换是使元素改变形状、尺寸和位置的一种效果。
（3）可以使用 2D 或 3D 转换来转换元素。
2D( transform )转换方法:
1）translate( )：移动
2）rotate( )：旋转
3）scale( )：缩放
4）skew( )：倾斜
5）matrix( ) 使用一个6个值的矩阵形式来进行2D转换
3D 转换方法:
1）rotateX ( )
2）rotateY ( )
注意 X 和 Y 一定要大写
二、使用代码详细讲解
打开集成开发环境，创建一个 transform 的 HTML File 文件，现在使用两个 div 进行展示，第一个 div 是初始效果，用作对比。
第二个 div 为变换后的效果，因为对第二个 div 要进行变换，所以增加一个类名
在 <body></body> 中输入
<body>
<div> 这是一个初始效果 </div>
<br/>
<div class= “change”>变换后的效果</div>
</body>
继续给 div 增加一个样式
在<title></title>下输入
<style>
div{
width: 100px;
height: 100px;
background-color: deepskyblue;
}
</style>
运行后效果如图
1. 使用 translate（）方式变换
在样式中增加代码：
.change{
transform:translate(100px,200px);//( )有两个参数，一个为向水平方向偏移的位移，即向x轴偏移，
第二个为向垂直方向的偏移的位移，即向y轴偏移
}
运行结果如图：
也可以只写一个参数（100px ），运行结果如图，只是向x轴移动了 100px 的距离。当第二个参数不提供时，默认值为 0
2. 使用 rotate（）方式变换
先注释掉 translate 方式，修改代码为：
transform:rotate(30deg);//（）中只有一个参数，为旋转的角度值
运行结果如图
3. 使用 scale（）方式变换
先注释掉 rotate（）的代码，修改代码为：
transform:scale(0.5,0.5);//（）中有两个参数，都为倍数
运行结果如图，宽和高都缩小二分之一
将值改为（2,3），运行结果如图，宽扩大2倍，高扩大3倍
4. 使用 skew（）方式变换
先注释掉 scale（）代码，
修改代码为：
transform:skew(50deg,50deg);
//（）中有两个参数值，都为角度变换值，第一个是向x轴倾斜的角度，第二个向 y轴倾斜的角度
运行结果如图
也可以只写一个参数（50deg），运行结果如图，只是 x 轴倾斜了 50，所以第二个参数不提供时，默认值为 0
5. 使用 rotateX（）和 rotateY（）方式 3D 变换
注释掉 skew（）代码，修改代码为：
transform:rotateX(120deg);
运行结果如图
再修改代码为transform:rotateY(120deg);
运行结果如图
三、浏览器内核
为了让所有浏览器都可以显示这种效果，在代码前要加上浏览器的内核
内核类型 |
写法 |
Webkit(Chrome/Safari) |
-webkit-transform |
Gecko(Firefox) |
-moz-transform |
Presto(Opera) |
-o-transform |
Trident(IE) |
-ms-transform |
示例：
以 transform:translate(100px) 为例，写入支持所有常见浏览器的内核，
代码如下：
.change{
transform:translate(100px);
webkit-transform:translate(100px);
-moz-transform:translate(100px);
-o-transform:translate(100px);
-ms-transform:translate(100px);
}
