css3-3D和动画

千锋教育官方

已于 2023-02-23 10:28:18 修改

阅读量369

点赞数

CC 4.0 BY-SA版权

分类专栏： WEB前端文章标签： css css3 html5

于 2020-10-13 16:04:48 首次发布

本文链接：https://blog.csdn.net/GUDUzhongliang/article/details/109053825

本文详细介绍了CSS3中实现3D视觉效果的关键技术，如景深、perspective、perspective-origin、transform-style、3D位移、缩放、旋转和动画原理，以及关键帧动画和CSS3动画的区别。掌握这些技巧，能帮助开发者创建更具沉浸感的网页设计。

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

景深

生活中的3d 区别于2d的地方

1、近大远小景深
程序中实现的方法 perspective 元素距离视线的距离（物体和眼睛的距离越小，近大远小的效果越明显）
perspective: 1200px;（在父元素中使用）

transform:perspective(1200px) （在子元素中使用）

两个都设置会发生冲突，建议只设置父元素，通常的数值在900-1200之间
如果当你的视线距离物体足够远的时候，基本上就不会有近大远小的感觉

perspective-origin

观察3d元素的（位置）角度

perspective-origin：center center  （中心）
perspective-origin：left top   （左上角）
perspective-origin：100% 100% （右下角）

2d场景，在屏幕上水平和垂直的交叉线x轴和y轴
3d场景，在垂直于屏幕的方法，相对于3d多出个z轴
Z轴：靠近屏幕的方向是正向，远离屏幕的方向是反向

实现3D场景

transform-style属性

transform-style属性是3D空间一个重要属性，指定嵌套元素如何在3D空间中呈现。他主要有两个属性值：flat和preserve-3d

其中flat值为默认值，表示所有子元素在2D平面呈现。preserve-3d表示所有子元素在3D空间中呈现。
也就是说，如果对一个元素设置了transform-style的值为flat，则该元素的所有子元素都将被平展到该元素的2