标签：动画 transform 关键帧 css3D 旋转 animation 3D

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。