css3d动画：平移、旋转、缩放

2024-06-05 17:19:41

1、前言：

3d比2d多了一个z轴，这个z轴是垂直我们屏幕的方向，指向我们人眼的是正轴，远离人眼的是负轴，图示如下：

2、景深设置和3d平移

当我们在z轴上向正轴方向上移动物体，也就是向我们眼前移动物体，结果不会发现这个物体变大，因为近大远小，所以应该向我们眼睛方向靠近时，它应该会变大，但是没有，原因是其实在没有设置景深时，我们眼睛距离这个物体是非常远的，所以它往前移动我们眼睛是感知不到它的变化的，我们眼睛和屏幕之间的距离就称为“景深”。我们需要去设置景深才可以观察到。

✍设置景深的属性：两种办法

（1）perspective：1200px；（在父元素中使用）

（2）transform：perspective（1200px）；（在子元素中使用）

代码：

要在z轴上设置平移属性，一定要设置景深才能看得出变化，而且要创建3d舞台。。。

✍3d复合写法：上面那个在z轴上位移的代码也可以写成：3d这种形式

3、3d旋转

✍属性介绍：3d旋转和2d旋转差不多，旋转默认都是绕着自己中心旋转

transform：rotateX（度数）；就是绕着x轴（水平轴）前后旋转；

transform：rotateY（度数）；就是绕着y轴（竖轴）左右旋转；

transform：rotateZ（度数）；就是绕着z轴（眼前的轴）转，也就是在眼前的平面转；

旋转图示：

✍绕Z轴旋转实例：

代码：

30°旋转结果：

50°旋转结果：

✍ 3d属性复合写法：

前面三个值是最后一个值的倍数，，，表示绕x轴旋转多少度，绕y轴旋转多少度，绕z轴旋转多少度

4、3d缩放

缩放属性和2d一样，见2d链接：2d平移、缩放、旋转、倾斜、多属性值_陌一一的博客-CSDN博客

说一下z轴的缩放，单独z轴缩放是看不见效果的，因为它是在我们眼前前后缩放，要配合其他属性来看才可以，例如配合景深和旋转等属性，，

css3d动画：平移、旋转、缩放相关推荐

Unity 触屏手势控制Camera平移旋转缩放
Unity 触屏手势控制Camera平移旋转缩放实现思路单点触屏,位移增量控制相机平移: 两点触屏,两点位移控制相机前后移动(缩放):两点中一点不位移控制相机绕点旋转: 实现需要的API Touc ...
三维空间中的几何变换-平移旋转缩放
前言前段时间由于项目需要,深入学习了下图形几何变换,主要是绕任意轴旋转部分(其他的已有一定基础),现记录学习笔记. 文章内容部分引用并参考了下面的博客: http://netclass.csu.ed ...
Unity矩阵平移旋转缩放Matrix4x4
Unity中的矩阵(Matrix4x4) 最近在研究帧同步定点数物理系统中需要自定义定点数矩阵,所以在这里分享下基础的矩阵案例旋转.平移.缩放.(注意这里本文中的transform组件式基于unity ...
WebGL编程指南-24 同时使用漫反射光和环境反射光、立方体平移旋转缩放变换时漫反射光和环境反射光处理
1.demo效果此效果是上一章绘制的立方体基础上,向Y轴方向平移一个单位,然后绕Z轴旋转30度. 如上图,归纳一下物体坐标变换法向量变化的规律如下平移变换, 法向量不会改变旋转变换, 大多数情况 ...
三维坐标偏转_三维坐标变换原理-平移, 旋转, 缩放
给定一个二维点(x, y),那么形如(kx, ky, k)的所有三元组就都是等价的,它们就是这个点的齐次坐标(homogeneous).齐次坐标就是将一个原本是n维的向量用一个n+1维向量来表示,是指 ...
三维坐标要建一个4*4的矩阵?平移旋转缩放
移植不知道三维物体的旋转平移缩放和矩阵的关系.找到这篇文章借鉴一下. 转自:https://blog.csdn.net/ALLENJIAO/article/details/80348362 怎么平移一 ...
Cesium变换3DTiles的位置（平移旋转缩放）
function add3DTilesetDataTrans(url) { //viewer1.scene.globe.depthTestAgainstTerrain = tr ...
OpenGL中的平移旋转缩放
1.opengl中缩放使用的函数是glScalef 其原型为void glScalef(GLfloat x, GLfloat y, GLfloat z); 该函数表示模型在各轴上进行扩大和缩 ...
flutter Transform 矩阵变换（平移旋转缩放）
Transform其子Widget绘制时外面包着矩阵变换(transformation),通过它可以实现各种矩阵操作. 1.widget平移效果图 2.旋转(rotate) 效果图: 3.缩放 Tr ...
osg中使用MatrixTransform来实现模型的平移/旋转/缩放
MatrixTransform是从Transform - Group继承而来,因此可以在它的下面挂接Node对象. 通过设置其矩阵,来实现其下子节点的模型变换. -- 用局部坐标系来理解(局部坐标系又 ...

最新文章

热门文章