当前位置：网站首页 > 技术文章 > 正文

css 3D transform 感性理解

myzbx 2025-03-10 18:42 18 浏览

一、首先，情感化认识

CSS3中的3D变换效果，其实就是现实中姿势的变换；

虽然都是成年人，但考虑到仍有不少窝中待守的雏鸟，如果上面的解释想不过来，就想想以下这些：

1.下图的这些人在干嘛？跳水？NO, No, No!! 记住，他们不是在跳水，是在做3D变换！！！

2.下图可爱baby在干嘛？广播体操？NO, No, No!! 记住，他不是在做操，是在做3D变换！！！

3.来到2次元，下图这个妹子在这幅姿态称为：

卖萌？NO, No, No!! 记住，他不是在卖萌，是在做3D变换！！！

二、感性认识 rotate 属性；

rotate旋转的意思，rotateX旋转X轴,rotateY旋转Y轴，rotateZ旋转Z轴……

什么X轴/Y轴/Z轴，这几个词从我嘴里一出来，别说你们，我自己都晕了~~

赶快，从现实世界找对应东西理解（参照下面人的旋转）：

邹凯的体操单杠运动rotateX；

蔡依林姐姐的钢管舞是rotateY；

旋转飞刀的特技表演是rotateZ。

三、感性认识必不可少的perspective属性

perspective的中文意思是：透视，视角！

perspective属性的存在与否决定了你所看到的是2次元的还是3次元的，也就是是2D transform还是3D transform. 这不难理解，没有透视，不成3D.

我们初中学美术，或者学建筑的同学肯定接触过透视的一些东西：

不过，CSS3 3D transform中的透视的透视点与上面两张示例图是不同的：CSS3 3D transform的透视点是在浏览器的前方！

四、translateZ更好理解透视

我们都知道近大远小的道理，translateZ的功能就是让元素在自己的眼前或近或远。比方说，我们设置元素为perspective201像素，如下：

perspective: 201px;

则其子元素，设置的translateZ值越小，则子元素大小越小（因为元素远去，我们眼睛看到的就会变小）；translateZ值越大，该元素也会越来越大，当translateZ值非常接近201像素，但是不超过201像素的时候（如200像素），该元素的大小就会撑满整个屏幕（如果父辈元素没有类似overflow:hidden的限制的话）。因为这个时候，子元素正好移到了你的眼睛前面，所谓“一叶蔽目，不见泰山”，就是这么回事。当translateZ值再变大，超过201像素的时候，该元素看不见了——这很好理解：我们是看不见眼睛后面的东西的！

五、感性理解perspective-origin

perspective-origin这个属性超级好理解，表示你那双色迷迷的眼睛看的位置。默认就是所看舞台或元素的中心。有时候，我们对中心的位置是不感兴趣的，希望视线放在其他一些地方。比方说：

一图胜千言，屌丝男们这个应该都懂的。

以上就是部分css 3D transform 属性的感性理解，可以更好的让我们玩转css 3D 让自己的网站更加酷炫；感谢阅读

各位朋友如果有兴趣或是想与我们一起学习计算机技术（软件开发），请大家关注我们的微信公众号：程序员互动联盟(coder_online)；我们这里有java高手，C++/C高手，windows/Linux高手，android/ios高手，还有一些你可能不知道的你感兴趣的事

注：本文部分内容摘自：鑫空间

CSS 2D 转换

上一篇：初识three.js，搭建three.js+vue.js项目
下一篇：教你玩会 CSS3 3D 技术

css 3D transform 感性理解

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

说下你的vue项目的目录结构，该怎么划分?

这么牛逼的cursor功能，赶紧用起来

8.7k star，一款超炫酷的动态可视化大屏项目

用上Vue3，你真的变了吗?（vue3 key）

20个免费音乐音效下载网站，无版权素材商业影片也可用

什么是“恒定光圈”，什么是“浮动光圈”?-摄影早自习第331

谷歌SEO:外贸电商网站On-page SEO优化实战「附案例」