Day 8

1.2d转换之移动：在CSS3中提交了元素转换的操作功能，通过使用transform来实现，可以实现元素的位移，旋转和缩放 位移：transform:translate() 旋转：transform：rotate() 缩放：transform:scale() 1.位移:使用translate()来进行指定，他需要通过x坐标和y坐标来确定移动的位置。 语法格式有： transform:translate(x,y);//在x坐标和y坐标上移动 transform:translateX(n);//只在x上运动 transform:translateY(n);//只在y上运动 注意： 1.当使用translate（x，y）时，x和y可以为正负 2.x和y轴的值要带单位，一般使用像素。可以用该属性来定义元素的位置，让显示效果更好。

2.转换之旋转：在css3中提供了旋转，使用rotate（）来实现，旋转时需指定 语法格式为： transform：rotate（）（数字deg）； 使用示例：把div旋转45° 注意：默认情况下旋转是以元素的中心位置为旋转点来旋转的。如果想选定旋转的中心点的位置， 可以使用 transform：origin（x，y）来指定。可以将图片以某点为中心旋转，可以和hover一起使用，将鼠标放在图片上让图片旋转。

3.转换器之缩放：在css3中可以将图片进行放大和缩小。缩放使用transform：scale（）来实现，有以下几种方式实现 transform：scale（x，y） transform：scale（1，1），宽和高都放大一倍，相对于没有放大。

transform：scale（2，2）宽和高都放大了两倍

transform：scale（2）只写一个参数，第二个参数和第一个一样，相当于（2，2）

transform：scale（0.5，0.5）缩小。这个也可以和hover连用，将鼠标移到图片上，可以将图片缩放。

4.转换器之过渡：过渡主要是用于图片的运动，可以让图片进行朝各个方向进行运动。

通过transition属性来定义，语法格式为:
transition:过渡属性 执行时间 运动曲线 延迟时间；
对于过渡而言，我们可以用transition来简写，也可以把这个属性分开，
transition-property：指定要用于过渡的属性名称，如 width height
transition-duration：过渡持续时间，单位是s。
transition-timing-function：过渡的运动曲线
transition-delay:延迟时间。
运动曲线:
ease:默认值，逐渐慢下来
linear：匀速运动
ease-out：减速
ease-in-out：先加速后减速

可以通过这个方式让图片运动，从而设计一些动画图片。

5.转换器之进度条:进度条是用于表示一个阶段进行的程度，可以设置它的长度，起始值，时间，速度等。还可以用它来表示一个阶段所进行的速度快慢。可以和hover一起使用，让鼠标移到进度条上让进度条移动。

6.动画：动画是将一个物体移动到另一个自己所定义的地方的属性。和位移类似，动画使用@keyframes来定义的，可以和hover一起使用，让鼠标移到图片上让图片移动，可以利用该属性还设计一些页面设置和布局。

7.3d：3d则是改变图片的形状，大小，方向。用

transform: translatez(100px);
 transform: rotate3d

来定义，但因为是3d，所以在设置数值时要设置x,y,z三个方向的数值，才可以让图片达到3d的显示效果