3d转换，过渡，2d转换，动画

3d转换

相对与2d，3d就是立体化，元素是在一个三维坐标系中，其中需要注意：

x轴：水平向右（x右边为正，左边为负）

y轴：垂直向下（y下面为正值，上面为负值）

z轴：垂直于屏幕（往屏幕外是正值，屏幕内是负值）

他的特点是远小近大，而且后面的物体会被遮挡住。

3d与2d用法上有很多相似之处：

位移：（1）：transform：translate（x，y，z）

（2）：transform：translateX/Y/Z(距离)

旋转：（3）：transform：rotateX/Y/Z（deg）

(4):transform:rotate(x,y,z,deg)

透视：（5）；perspective（就是远小近大的原因）

3d呈现：（6）：transform-style

3d呈现；

（1）控制元素是否开启三维环境。

（2）transform-style：flat：子元素不开启3d空间（默认）

（3）transform-style：preserve-3d：子元素开启3d空间

（4）代码是写给父级的，但是影响的是子级

动画

定义：它是css3中的具有颠覆性的特征之一，它可以通过设置多个节点来精准控制一个或者一组动画，它可以协助制作者实现复杂的动画效果。它比较于过渡来说可以实现更多变化，更多控制，连续自动播放等效果。

那么如何制作动画呢：

1.先要定义动画

2.再使用动画

（相当于一个变量，要定义才能更方便多去使用。）

注意：要使用动画，需要高版本的浏览器。

1，使用动画前，用@keyframes定义动画，定义好后，通过animation属性来指定动画名称。

定义动画是，需要告诉它这个动画如何完成

（1）：开始状态：from

（2）：结束状态：to

例如：

<style>

.box{
position：absolute

left/right:

top/bottom:

}(这是定义好的方形，当然也可以对body中的进行编辑，运用选择器就可以了）

.box;hover{animation:move 2s

}

@keyframes move{
from{left:0px;

top:0px         }

to{left: 100px

bottom:100px       }

</style>

除了用from，to，还可以用百分数来表示。即from类似百分之零，才开始；to类似百分之一百，已经结束。但百分数的好处是它可以定义的更多一些，也就是中间的元素变化也可以进行编辑。

但注意：要想元素具有动画效果，除了定义好动画和运用外，还需要给这个元素进行绝对定位。

其中animation是动画属性的简写。他后面必须接name（元素的名称），duration（动画完成一个周期所需的时间）；还可以接timing-function（动画的速度曲线，默认为ease），delay（动画何时开始，默认为0），iteration-count（动画播放的次数，默认是1，还有infinite），fill-moode（动画状态，通常有两个值进行指定：保持结束时候的状态（forwards），回到开始时的状态backwards），play-state（规定动画是否在运行还是暂停，但他必须单独使用，即另成一行。其中running表示运行，是默认值；paused表示暂停状态）等一些常用属性。

另外：opacity是指透明度，当为1的时候，就是透明了。

将这些与css3中其他特征结合起来，会有更好的效果

2d转换

是什么：所谓转换就是对页面中的元素进行位移，旋转，缩放等一系列形态上的变化，也可以说它是一种元素的“变形”。当然它也是属于css3中的一种加工元素的方式，今天带你们了解一下其中的2d转换。

1.其实吧，2d个人感觉应该就是相当于一个平面。而网页很多元素都是在平面上进行编辑的。

2.移动（translate）

就是改变元素在页面上的位置。比如，你觉得你所编辑的网页中图片在左上角，但你觉得他应该在你所写的内容的右侧，相当于插画。这个时候你就可以用“移动”来进行操作。

语法：transform：translate(x,y)

你还可以分开写，像这样：

           transform：translateX(n)

           transform：translateY(n)

但注意：（1）：2d中的移动是沿着x，y轴移动的。（对比原图形，同时x，y的值可正可负）

              （2）：其次，它不会影响到其他元素的位置，不会存在把另外元素挤走，或者挤压的情况。

              （3）：当你用%单位来定位时，是相对于自己元素的本来正中间的点进行的。

              （4）；但他对行内标签没有效果（行内标签：与其他标签在同一行，但他不能设置宽度，高度，行高，以及距顶/底部距离）

3.旋转。

这个就很好理解了，比如说，你写的福字，你想给它到过来，就需要运用到旋转这一方式。

语法:transform ：rotate()[在这个小框框里是我们需要旋转的数值，但注意其角度符号是deg。

示例：<style>

.box{
posistion:absolute

width:50px

height:50px

transform:rotate<45deg>

}

</style>

这个时候你就会发现原来你所创造的小方形在页面上旋转了45度，一般情况下旋转是以元素中心为旋转点来进行旋转，所以当你在旋转时要注意在页面边上的元素哦，很可能会有些部分被你旋转出框。

4.转换中心点。

你会发现在转换中多次出现中心点，那中心点一定就固定吗？不，他可以进行改变这个时候就需要origin属性来操作。

语法：transform-origin：x  y；

但它有些地方注意：（1）；x，y参数中间是需要用空格来隔开的。

                                （2）：x，y默认转换的中心点是元素的中心点（50% 50%）

                                （3）：还可以给x，y设置像素或者方位名词（top bottom left right center）

5.缩放。

这个也很好理解，就是对你页面中的元素的大小进行改变，其中也可以只对元素的一个部分进行缩放。

语法：transform：scale（x，y）

注意：（1）：其中x，y用逗号来隔开。

           （2）：当你用transform：scale（a，a）跟transform：scale（a）效果是一样的

           （3）：其中大于1是指放大，小于1是指缩小。

过渡

过渡：就是当你在将一个元素变换成另一个元素时可以添加的效果。而过渡动画则是从一个状态渐渐的过渡到另外一个状态，经常和hover一起用，

使用语法：

transition：过渡属性 执行时间 运动曲线 何时开始
可以用此缩写来用，但也可以把属性分开来用：
-transition-property：指定用于过渡属性的名称：如：width
-transition-duration：过渡持续时间，秒
-transition-timing-function：过渡的运行曲线，默认为ease
-transition-delay：延迟执行时间，秒
注意：添加过渡元素效果的代码需要放在你想要进行过渡的元素上。就是说，希望那个元素有过渡效果就把代码添加到那个元素上去。
运动曲线有那些：
ease：默认值，逐渐慢下来
linear：匀速运动
ease-in：加速
ease-out：减速
ease—-in-out：先加速后减