菜鸟web笔记

 <!--

        过渡动画

            transition-property:css样式；

                参与过渡的css属性名称

            transition-duration:1s;

                规定过渡执行的时间 1s=1000ms

                单位 s  ms

            transition-property：width,backgroundcolor;复合写法，用逗号隔开

            transition-property：all;表示所有属性参与过度

            transition-delay: ;

                规定过度的延迟时间

            transition-timing-function: ;

                规定动画执行的速度类型

                取值：inear匀速，以相同速度从开始到结束

                      ease，默认值，慢速开始，速度变快，慢速结束

                      ease-in 以慢速开始的过度效果。其实是加速 效果

                      eaase-out 慢速结束的过渡效果

                      ease-in-out慢速开始和结束的过度效果

            简写

                transition：css样式 过度的执行时间 速度类型 过度的延迟时间。

            注意：谁发生了属性改变，就夹在谁身上

     -->

    <!--

        搭建3D

            transform-style: preserve-3d;

            什么时候搭建3D舞台?

                当父元素有3D变形，子元素也有3D变形

            景深：perspective  属性值为透视点到元素的距离，近大远小：也可让网页产生3D效果

            transform:translate3d(x,y,z)

            沿着x,y,z，轴同时进行位移

     -->

     <!--

        3D旋转

            transform: rotate3d(x,y,z,度数)

            xyz是0-1之间的数值

            度数：角度值

      -->

    <!--

        缩放

            transform:scale3d(x,y,z)

            0-1缩小

            1以上放大

            注意：scale单独使用看不到效果，需要搭配其他变换属性

     -->