移动web之动画,外加3d

最新推荐文章于 2023-10-28 22:51:53 发布

流川枫不风流

最新推荐文章于 2023-10-28 22:51:53 发布

阅读量231

点赞数

文章标签：前端 3d

本文链接：https://blog.youkuaiyun.com/YasWestmere/article/details/127180632

版权

本文介绍了移动Web上的3D动画，包括3D位移、透视效果、3D旋转以及动画的定义与调用。详细讲解了transform属性中的translate3d()、rotateX()、rotateY()，以及透视距离设置和动画关键帧的使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.3D位移书写:

transform:translateX(值px);代表坐标轴x轴,x轴向左,值为负,向右为正

transform:translateY(值px);代表坐标轴y轴,y轴向上,值为负,向下为正

transform:translateZ(值px);代表坐标轴z轴,z轴指向我们越大,为正值,指向我们越小值为负

连写: transform: translate3d(x, y, z);

透视:

2.透视

透视的作用：空间转换时，为元素添加近大远小、近实远虚的视觉效果

语法:

 perspective: 800px;

透视注意事项：

取值范围经常在 800px ~ 1200px 之间。
一定给父亲添加
透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。
- 其中 d 为透视的距离
- z 是 translateZ 的距离，这个距离靠近我们，盒子越大

3.3D旋转

transform:rotateX 代表图像沿着x轴旋转,从下往上转,值为负,从上往下转值为正

transform:rotateY代表图像沿着y轴旋转,从下往上转,值为负,从上往下转值为正

若想让图像呈现立体:

子盒子需要在父盒子里添加 transform-style: preserve-3d;

4.动画

1.动画有两个步骤: 定义动画,和调用动画

定义动画代码: 分为单个动画和多个动画,from-to是指动画开始到结束,另一个是百分比分段,指动画阶段有多个,例如0%{添加动画转换元素} 50%(添加动画转换元素) 100%(添加动画转换元素)

@keyframes dance {

       0% {
        transform: scale(0)
      } 
        50% {
        transform: scale(1)
      } 

      100% {
        transform: scale(1.5)
      }
    }

@keyframes dance {

    from {
        transform: scale(1)
    }

    to {
        transform: scale(1.5)
    }
}

2.调用动画

animation:动画名称动画时间速度曲线延迟时间重复次数动画方向执行完毕状态中间的状态都是用空格隔开,若有多个动画效果,二者动画直接属性要用逗号隔开例如:animation:动画名叫move 2s linear,动画名play 1s linear

代码效果:

animation:move 2s linear, play 1s linear

动画暂停:animation-play-state: paused;

3.调用动画运用到的代码属性:(常见)

动画名字参照css类选择器命名
动画时长和延迟时间别忘了带单位 s
infinate 无限循环动画（重复次数）
alternate 为反向就是左右来回执行动画（跑马灯）
forwards 动画结束停留在最后一帧状态，不循环状态使用
linear 让动画匀速执行