时间戳

首页 > 解决方案 > CSS - 独立的翻译和缩放功能？

html - CSS - 独立的翻译和缩放功能？

问题描述

我目前正在学习前端，并且在我正在学习的课程中 (?) ，我们使用transform: translate(-10px, 10px) 但是，我最近发现了一个独立的translate属性，它的工作方式和行为方式完全相同。这是否意味着我应该停止使用transform并改用单个属性？

标签： htmlcss

解决方案

根据这里的 CSS 文档：

translate、rotate 和 scale 属性允许作者以映射到典型用户界面使用的方式独立指定简单的转换，而不必记住保持 translate()、rotate() 和 scale 操作的转换顺序() 独立并作用于屏幕坐标。

因此，当您使用transform并应用多个变换函数（例如translate、scale或rotate）时，函数顺序会影响视觉效果（很难记住每个函数如何影响其他函数）。

当您使用单独的转换时，您不必处理它并且顺序并不重要。

推荐阅读