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. 总结

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

       

        

标签：动画,transform,关键帧,css3D,旋转,animation,3D
来源： https://www.cnblogs.com/xiaoyang459/p/12382642.html