3D+动画

最新推荐文章于 2024-01-29 10:02:44 发布

一个对前端瑟瑟发抖的小白

最新推荐文章于 2024-01-29 10:02:44 发布

阅读量242

点赞数 1

文章标签： css3

本文链接：https://blog.csdn.net/weixin_46578458/article/details/105399986

版权

3D

                   建立3D空间
                  transform-style:preserve-3d;

               3d位移  
                        transform:translate3d(x,y,z)
                        transform:translateX()
                        transform:translateY()
                        transform:translateZ()         eg：Z轴的距离一般用PX表示


               3d旋转   
                        transform:rotate3d(x,y,z,deg)
                        transform:rotateX()
                        transform:rotateY()
                        transform:rotateZ()

               3d缩放    
                        transform:scale3d(x,y,z)
                        transform:scaleX()
                        transform:scaleY()
                        transform:scaleZ()

               背面不显示

                        backface-visibility:hidden;
                        
                       

         景深  
               为了更好的体现立体效果  
                  近大远小 
                   
                  perspective:;     值一般在900px-1200px 
                  加在父元素上

                景深视角 
                   perspective-origin:center;
                             px 值
                             百分比

动画

 制定关键帧

                    @keyframes 动画的名称{
                        form{

                        }
                        to{

                        }
                    }
                
                    @keyframes 动画的名称{
                        0%{}
                        50%{}
                        100%{}
                    }
                                可以添加多个效果


         动画    
                  animation属性
                  
                  1 动画的名称           animation-name:;
                  2 动画的运动时间        animation-duration:;
                  3 动画的延迟时间        animation-delay:;
                  4 运动的类型            animation-timing-function:;
                                         linear  匀速
                                         ease    默认值  先加速后减速
                                         ease-in      由慢到快
                                         ease-out     由快到慢
                                         ease-in-out  先慢再快后慢
                                         step-start   马上调到每一帧结束的位置
                  5 运动的次数            animation-iteration-count:;
                                          number    数字
                                          infinite  循环
                  6 运动的方向            animation-direction:;
                                          normal  正向
                                          reverse 反向
                                          alternate  先正向后反向
                                          reverse-alternate  先反向后正向
                  7 运动的状态            animation-play-state:;
                                          running 默认值
                                           paused 暂停
                                           当鼠标经过时 暂停运动
                                         animation-play-state:paused;
                  8 运动停止的状态        animation-fill-mode:forwards;
                  
                  

            animation  与  transition 的区别

                 transition 需要事件才能触发
                 animation  只需要时间就可以发生