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