css3D

CSS3D

这周了解css3D,可以通过一个3D空间，3D的位移，3D的旋转，3D的缩放实现简单的3D动画！！

   1：css3-景深！（3D空间！）

        观察物体的一视角距离.：近大远小  用到代码perspective 

       　　例如：perspective: 1200px;（一般都是在父元素中使用）

                  　　transform:perspective(1200px) （在子元素中使用）

       看一件东西除了距离还要视觉角度，视觉角度，用到代码  persperctive-origin:

 

　　　　　　例如：persperctive-origin:right bottom（右下）

 

 

 

 

 

      2. 形成一个3D空间：( 让父元素形成3D，让其子元素在3D空间进行变化 )

       　　 transform-style:preserve-3d

　　　　 2d场景，在屏幕上水平和垂直的交叉线x轴和y轴

   　　　  3d场景，在垂直于屏幕的方法，相对于3d多出个z轴

   　　　 Z轴：靠近屏幕的方向是正向，远离屏幕的方向是反向

　　3.变形属性： transform:

　　　　3D的位移：transform:translate(x,y,z);也可以分开写单独调整某个角度

　　　　　　　　　　translateX()

               　　　　　   translateY()

               　　　　　   translateZ(不能是百分比)

                   

　　　　3D的旋转：transform:rotate( );

                　　　　　　rotateX()

             　　　　　　   rotateY()

            　　　　　　    rotateZ()  //默认情况效果类似

             　　　　　　   rotate3D(x,y,z,a)   [ 0不旋转。1旋转 ]

　　　　　 - x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；

                    - y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；

                    - z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；

                    - a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。

 

 

　　　3D缩放：transform:scale3d(x,y,z);

                　　　　scaleX()

                　　　　scaleY()

               　　　　 scaleZ()

　　4.css动画

          动画分为两步，制定关键帧和调动关键

            1）制定关键帧：第一种@keyframes 关键帧的名称{

            　　　　　　　　　　　　　　　　　　　from{ }

          　　　　　　　　　　　　　　　　　　　　to{ }    }

                第二种也是比较常用的   @keyframes 关键帧的名称{

　　　　　　　　　　　　　　　　0%{ //开始状态 } 

　　　　　　　　　　　　　　　 25%{            }

            　　　　　　　　　　　　50%{            }

            　　　　　　　　　　　　　　　......

            　　　　　　　　　　　　100%{ //结束状态}        }

        2）调用关键帧   常用的写法：  animation:关键帧的名称  动画运动的时间  linear(匀速)  动画延迟的时间

           

　　　animation:  复合属性

       　　 animation-name   关键帧的名称

       　　 animation-duration   动画的持续的时间

       　　 animation-timing-function   动画运用的类型（匀速linear、加速度、减速度、贝塞尔曲线）

     　　   animation-delay  动画的延迟

    　　    animation-iteration-count   动画运动的次数（默认情况下运动1次） infinite(无限循环)

    　　    animation-direction  运动的方向

                属性值：

                    - reverse：反方向运行 （ 让关键帧从后往前执行 ）

                    - alternate：动画先正常运行再反方向运行，并持续交替运行

                    - alternate-reverse：动画先反运行再正方向运行，并持续交替运行

        　　animation-play-state 

                属性值：

                    paused暂停

                    running运动

     注：transition:

        　　　　过渡：

           　　　　　　 特点：需要事件进行触发。

   　　 animation

       　　　　 动画：

            　　　　　　特点：不需要事件进行触发。调用关键帧即可

 

5. 总结

每周一点点，加油加油！！