css插入内容和元素的旋转位移

插入内容

   1.伪元素选择器
      1.:before 或 ::before
        匹配某元素的内容之前
      2.:after 或者 ::after
        匹配某元素的内容区域之后
      3.内容生成的属性
        属性：content
       取值：
          1.字符串：纯文本
            使用的话，要用""引起来
            content:“插入文本”
          2.图像：url()
            content:url(xxx.jpg)
    2.解决的问题
        1.浮动元素的父元素高度

                    .clear:after{
                        content:"";
                        display:bolck;
                        clear:both;
                        }

      2.外边距溢出

                    #d2:before{
                        content:"";
                        display:table;
                    }

2D 和3D的旋转及位移

 1.转换
    转换就是改变元素在页面中大小，位置，形状，角度的一种方式
    转换分为 2d转换 和 3d转换
    2d转换：使元素在x轴和y轴进行转换
    3d转换：增加了z轴进行转换
    1.转换的属性
      1.转换属性
      属性:transform
      取值
      1.transform-functions
        一组转换函数，表示一个或多个转换函数，多个的话用空格隔开
      2.转换的原点
      属性
        transparent-origin
        默认：在元素的中心处
      取值：
        最少两个值，最多三个值
        两个值： 值1x 值2y
        三个值： 值1x 值2y 值3z
2.2D转换
  1.2D位移
    2D位移就是改变元素在x轴和 y轴上的位置
    1.语法
    属性 transform
    函数：
      translate(x) 取值为正右移 为负左移
      translate(y) 取值为正下移 为负上移
      translateX 改变在x轴上的位置
      translateY 改变在y轴上的位置
  2.2D缩放
    属性：transform
    函数
      scale(value)
        value为等比缩放倍数，如果只给一个值，x和y轴是等比缩放
    取值：
      默认值为1，即原始大小
      缩小：0-1间的小数
      放大：大于1的数值
      负值：以旋转180度效果显示
        scale(x,y)
  3.2D旋转
    属性：transform
    函数：rotate(旋转角度deg)
        取值为正顺时针 负值为逆时针

    注意：
        1.旋转 原点
            转换原点位置不同，转换效果也不同
        2.旋转时连同坐标轴也跟着改变

  4.2D的倾斜 改变元素在页面中的形状，以原点为中心，沿x轴或者y轴产生的倾斜角度
    1.语法
    属性：transform
    函数：
      skew(xdeg)
      像横向产生倾斜效果，实际改变的是y轴的倾斜角度
      值为正，y轴按逆时针旋转 为负则顺时针旋转
      slew(xdeg,ydeg)
        x：横向倾斜
        y:纵向倾斜
        值为正，x轴顺时针角度倾斜 值为负按逆时针角度倾斜
  3.3D转换
    1.3D 转换属性
      属性 perspective
        模拟 人眼 到 3D变换物体 之间的距离
        属性添加在 3D 转换元素的父元素上
    2.3D旋转
      属性 transform
      取值
        1.rotatex(ndeg);
        2.rotatey(ndeg);
       3.rotatez(ndeg);
        4.rotate3D(x,y,z,ndeg);
          x,y,z取值为零说明该轴不参加旋转 1为参加旋转
            先旋转再位移
    3.3D位移
        3d位移就是 改变元素在页面中的上中下左右
      1.语法
        1. transform-style 属性
          取值：
            1.flat
              默认值，不保留元素的3d位置 只能上下左右的改动位置
        2.preserve-3d
            保留子元素的3d位置
      2.transform属性
        取值：
          translateZ(z);
          translate3D(x,y,z);