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

css 3D transform 感性理解（css 3d模型）

zhezhongyun 2025-07-19 23:51 20 浏览

一、首先，情感化认识

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高手，还有一些你可能不知道的你感兴趣的事

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

perspective 属性

css 3D transform 感性理解（css 3d模型）

相关推荐

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

HTML 简介（html简介及优缺点）

现在页面实时聊天都使用Websocket技术实现吗?

关于HTML5被简称做H5，你怎么看?（html5缩写）

在SpringBoot+Vue3项目中通过Nginx代理WebSocket实现跨域通信

利用webSocket实现消息的实时推送

谈谈websocket跨域

前端开发规范(一、HTML篇)

html5 工业web组态-开发自定义的组件 (炫酷按钮)

Python每日一库之Beautiful Soup（python mtime）