首页 > Web开发 > 详细

css3D

时间:2020-02-29 14:00:29      阅读:55      评论:0      收藏:0      [点我收藏+]

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到1之间的数值,主要用来描述元素围绕X轴旋转的矢量值;
                    - y:是一个0到1之间的数值,主要用来描述元素围绕Y轴旋转的矢量值;
                    - z:是一个0到1之间的数值,主要用来描述元素围绕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. 总结

每周一点点,加油加油!!

       

        

css3D

原文:https://www.cnblogs.com/xiaoyang459/p/12382642.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!