菜鸟web笔记

<!--

        css3动画

            2D

            变换属性transform

                属性值translate(x轴，y轴)

            transform：translate(x轴数值，y轴数值)；沿着X轴和Y轴移动

            transform：translateX(数值)；沿着X轴移动

            transform：translateY(数值)；沿着Y轴移动

            不会脱离文档流，仍然占位，在原来的位置

            数值取值：

                px

                百分比（相对于元素本身进行计算）

                允许负值，正值默认向下向右，负值向上向左

        -->

    <!--

        盒子水平垂直居中

            position:fixed;

            left:50%;

            top:50%;

            transform:translate(-50%,-50%);

     -->

    <!--

        2D旋转

            transform:rotate(度数)沿着中心点进行旋转

            transform:rotateX(度数)沿着X轴进行旋转

            transform:rotateY(度数)沿着Y轴进行旋转

            单位deg

            当角度是正值时，顺时针旋转

            当角度是负值时，逆时针旋转

     -->

     <!--

        设置元素的基点位置

            transform-origin: 水平方向 垂直方向;

            取值：px，百分比（相对于元素自身的宽高进行计算）

                关键字（一个值的话，另一个值默认为center）

           

      -->

    <!--

        2D倾斜

            transform:skew(X,Y);沿着X轴和Y轴倾斜

            如果只有一个值，只沿着水平方向倾斜

            transform:skewX（）；沿着X轴倾斜

            transform:skewY（）；沿着Y轴倾斜

     -->

    <!--

        2D缩放

            transform:scale(X,Y);沿着X轴和Y轴放大，只有一个值时，他会沿着垂直和水平方向等比例缩放

            负值：先反转，然后沿着X轴和Y轴放大或缩小

            缩小的取值范围只能是0到1之间

            transform:scaleX（）沿着X轴缩放

            transform:scaleY（）沿着Y轴缩放

       -->