css 2D和3D的运用

1、指定对象的背景图像显示的原点。

      background-origin

      （1）、 padding-box：

       从padding区域（含padding）开始显示背景图像。

      （2） border-box：

       从border区域（含border）开始显示背景图像。

      （3） content-box：

        从content区域开始显示背景图像。

    2、指定对象的背景图像向外裁剪的区域

        background-clip

      （1）、 padding-box：

       从padding区域（含padding）开始显示背景图像。

      （2） border-box：

       从border区域（含border）开始显示背景图像。

      （3） content-box：

        从content区域开始显示背景图像。

    3、指定对象的背景图像的尺寸大小

         background-size

二、文本

    1、设置或检索对象中文本的文字是否有阴影及模糊效果

       text-shadow

      none：   无阴影

     <length>①：第1个长度值用来设置对象的阴影水平偏移值。可以为负值

     <length>②：第2个长度值用来设置对象的阴影垂直偏移值。可以为负值

     <length>③：如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值

     <color>：设置对象的阴影的颜色。

    2、置或检索当当前行超过指定容器的边界时是否断开转行

       word-wrap

       可选值：  normal：允许内容顶开或溢出指定的容器边界。

            break-word：内容将在边界内换行。如果需要，单词内部允许断行。

    3、检索或设置对象中的单词之间插入的空格数。

       word-spacing

     该属性将指定的间隔添加到每个单词(词内不发生)之后，但最后一个字将被排除在外。

     判断是否为单词的依据是单词间是否有空格。

三、2D和3D转换

      2D转换

    属性  transform

     1、通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参

       translate() 

     2、通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转

      rotate() 

     4、元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数

       scale() 

     5、matrix() 方法把所有 2D 转换方法组合在一起

       matrix() 

    3D转换

    属性    transform

       1、通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转

         rotateX() 

       2、通过 rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转  

         rotateY() 

       3、允许你改变被转换元素的位置。

         transform-origin 

四、过滤效果

     属性transition

     1、规定应用过渡的 CSS 属性的名称

        transition-property 

     2、定义过渡效果花费的时间

       transition-duration 

     3、规定过渡效果的速度曲线

        transition-timing-function 

    4、规定过渡效果何时开

        transition-delay