CSS3——2D、3D和动画相关属性

            我们都知道物体有2D和3D的，当我们在网页布局中使用一些3d和动画效果，会使我们我页面看起来更加美观、高级。

            在学习3D前我们先学习2D的相关属性。

一、2D转换

            2D是一个平面的物体，由x轴和y轴组成，2D的转换主要是移动、旋转、缩放。

1.移动【transform:translate(x,y)】

           控制元素在x轴y轴上移动，如果使用translate只设置一个值时，另一个值不可以省略不写。

若只想修改单个坐标轴的值，可以使用translateX()或者translateY()。

            translate中可以使用百分比单位，是相对于自身元素的。translate(50%,50%)是向x轴y轴移动自身元素的一半。可以配合定位更加方便让元素垂直居中，且后期更改元素大小不需要重新计算更改数值。

           使用translate移动元素不会影响其他元素的位置，而以前使用margin值一旦再次更改元素位置，会影响其他元素的位置。

注意：该属性对行内标签无效。

2.旋转【transform:rotate(度数)】

           控制元素的旋转，单位是deg，正值顺时针旋转，负值逆时针旋转。

3.缩放【transform:scale (x,y)】

           控制元素的缩放，里面跟的数字就是倍数，不需要单位。当x和y的值一样时，可以只写一个值，默认第二个值与第一个值相同。 里面的数字可以是小数，大于1是放大元素，小于1是缩小元素。

           scale的优点：缩放不会影响其他的元素，且是以中心点进行缩放的。若是直接更改元素大小，会影响其他已经布局好的盒子，宽度是由中心向两边扩开，高度是由上向下扩。

4.多个转换时的写法【transform:translate() rotate() scale()…】

            因为css具有层叠性，转换使用的都是transform里面的属性，所以多个转换需要写在一起，中间用空格隔开。

注意：

           顺序会影响转换的效果。（先旋转会改变坐标轴方向）当我们同时有位移和其他属性时，位移放最前面。

5.更改中心点【transform-origin:x y】

           移动、旋转、缩放的默认中心点都是自身元素的中心，可以使用transform-origin更改中心点位置。默认中心点(50% 50%)=center center  

           里面的参数用空格隔开，x、y可以是方位名词（top、bottom、lleft、right、center），也可以定义数值加单位（px）。

二、3D转换

           3D的物体比2D的物体多了一个z轴，通过z轴来实现物体近大远小的准则。 3D的转换主要是移动和旋转。

1.3D移动【transform:translate3d(x,y,z)】

   

            3D的物体，x轴水平向右 ，右为正值，左为负值；y轴垂直向下 ，下为正值，上为负值；
z轴垂直屏幕，往外为正值，里为负值。

            当我们只需要更改一个坐标轴的值时，可以直接使用translateX()或者translateY()或者translateZ()。

2.3D旋转【transform:rotate3d(x,y,z) 】

             在3D旋转中，主要是让x轴y轴z轴进行旋转。

transform：rotateX(45deg) :沿着X轴正方向旋转45度
transform：rotateY(45deg) :沿着Y轴正方向旋转45度
transform：rotateZ(45deg) :沿着Z轴正方向旋转45度
transform：rotateX(45deg) :沿着自定义轴旋转，deg为角度 了解即可

            x轴y轴z轴都有方向，在写值时要注意角度的正负。 xy轴可以使用左手准则，z轴和2D旋转一样，正值顺时针，负值逆时针。

            左手准则：使用左手大拇指朝向当前轴的正方向，其四根手值的方向就是旋转正值的方向。

                        

★ 3.透视【perpective】

               想要有透视效果，必须加perpective属性。实现近大远小的效果。透视的单位是px。

透视写在被观察元素的父级盒子上面！！！

 d：视距，距离视觉点越近的在电脑平面成像越大，越远成像越小。即perpective值越大，距离屏幕越远，看到的越小

z：z轴，物体距离屏幕的距离，z轴越大（正值），看到的物体越大。

★4.3D呈现【transform-style 】

            该属性规定如何在 3D 空间中呈现被嵌套的元素。默认子元素不开启3D立体空间。

 该属性加在父级上，影响的是子盒子！

       transform-style：flat 默认不开启3d立体空间

       transform-style：preserve-3d 子元素开启立体空间

3D呈现和透视在3D中非常重要，基本上用3D属性就需要用到这两个属性。 

三、动画属性

            在页面中常常有一些动画效果，相比起过渡效果，动画可以自动播放，而且可以设置的属性会更加丰富。

            在使用动画前我们需要先定义动画。先定义后使用。

1.定义动画：

@keyframes 动画名称{
     0%{
       }
     100%{
       }
}

        0%是动画的开始，100%是动画的完成，也可以使用关键词 from 和 to 来定义动画，等价于 0% 和 100% 。
       可以使用百分比定义多段动画，0%里面可以不写东西，也可以省略不写。

2.使用动画animation

下图是动画animation的相关属性表：

 也可以使用animation的复合写法：

  animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否发反方向 结束状态

           每个属性之间用空格隔开，当我们需要给同一个元素添加多个动画时，一组动画与一组动画之间用逗号隔开。

           简写属性中不包含animation-play-state：puased，该属性一般和鼠标经过配合使用，不然会有样式冲突。

animation-timing-function 的相关值

          注意steps()属性可以实现打字机效果和多张图片形成动图效果。

四、总结

             本篇博客主要总结了2D、3D和动画的相关属性，下篇博客会介绍一些案例来加深理解。