第一次a rotateY 我确信会将一张卡片倾斜到屏幕上,只是将其压扁,我失去了一个下午的大部分时间才明白原因。没有透视。我写过旋转,但没有写出使旋转读作深度的函数,CSS 完全按照我告诉它的内容而不是我的意思。那个下午是我现在通过拖动滑块和观看盒子响应来构建变换的全部原因,而不是输入值、保存、刷新和眯眼。
CSS transform property是语言中最有用的东西之一,也是最容易被微妙地弄错的东西之一,它移动、转动、缩放和倾斜一个元素,而不会打扰周围的任何东西,这就是为什么每个悬停效果、每个卡片提升、每个入口动画都依赖于它,但它将很多行为打包成一个短字符串,函数的顺序改变结果,3d函数有一个依赖性,直到你击中它,你能看到正在构建的值远远超过你必须想象的值。
的 CSS 变换生成器 为您的每个功能提供一个滑块,平移、旋转、缩放、倾斜以及 rotateX、rotateY 和透视的 3D 三重奏,并在您制作时将每个更改应用于实时预览元素。它还可以让您设置变换原点,即旋转和缩放的锚点。准确的声明位于下面的复印盒中,仅包含您触摸的功能。
TL;博士: CSS
transformproperty 重新定位和重塑一个元素而不影响页面布局,这正是它成为悬停效果和动画的正确工具的原因,函数从右到左应用,因此顺序很重要;3D 旋转需要一个perspective()显三维;而任何变换后的元素都成为其固定和绝对子项的包含块,这个生成器通过实时预览曝光每个功能,仅发出您更改的功能,并生成干净的 CSS,您可以直接粘贴到样式表中,它完全在您的浏览器中运行,无需注册。
CSS变换生成器解决了什么问题?
的 transform property抽象的方式一样,css网格是抽象的,你不是直接移动像素;你是在描述一个几何操作,让浏览器计算结果。 translateX(40px) rotate(15deg) scale(1.1) 是精确的指令,但无法仅从文本中感受到链接那三个的结果,你必须渲染它,而在自己的项目中渲染它意味着写-保存-刷新循环,这足够慢,大多数人早在找到他们想要的价值之前就停止了实验。
1个生成器崩溃,那循环到什么都没有,你拖动旋转滑块,盒子实时转动,你抬高尺度,它从其中心生长,你添加翻译,它滑动,同时保持它的转动,这十分钟和数字和运动之间的关系停止了,在你的脑海中翻译的东西,变成你感觉到的东西,当你完成后,没有什么可以转录的,因为工作CSS已经为你写了整个时间。
还有第二个好处比看起来更重要。通过操作构建变换意味着该工具只能发出有效的、格式良好的 CSS。您无法产生损坏 transform 通过拖动滑块来获取价值,因此输出始终可以安全地粘贴。这种可靠性就是我关闭一层可视化 CSS 构建器的原因,这与我到达的原因相同 盒影生成器 而不是用手计算阴影偏移。
为什么变换函数的顺序很重要?
Zhe是使人最为绊倒的单一细节, 值得去了解, Bu值得去四处打拼, 当你把几个功能列在Yi个中 transform中,浏览器将它们从右到左应用,每个都在前一个留下的坐标空间中操作。这意味着顺序真正地在元素最终所在的位置发生变化。
拿 translateX(100px) rotate(45deg) 对比 rotate(45deg) translateX(100px).在第一个中,元素平移一百像素后原地旋转,所以它坐右一百像素,转四十五度,在第二个中,旋转首先发生,它使元素's坐标轴转动,平移后沿该移动一百像素 旋转 X轴,向下和向右斜向发送,相同的两个函数,相同的两个值,完全不同的位置。
Generator 故意的顺序发出它的函数,先透视,然后平移,然后旋转,然后缩放,然后倾斜,这是一个明智的默认,它使常见的情况保持直观的行为。但一旦你明白了顺序是有意义的,你也明白了为什么从一个地方复制到另一个地方的变换有时会产生你没有预料到的结果:你移动了字符串,但没有移动它背后的心理模型。自己构建它,并看到每个函数's 贡献,就是该模型的构建方式。
3D变换如何看上去是3D的?
这是那天下午让我付出代价的陷阱。功能 rotateX 並 rotateY yi个元素绕着水平和垂直轴转动,应该像翻页一样向你倾shi或远离你,但默认情况下场景没有深度,所以转动直ji投射到屏幕的平面上,元素简单地显得压缩a rotateY(60deg) 没有透视,元素看起来会变窄,而不是转动。
缺失的成分是 perspective且有两种供货方式,可以放一个 perspective parent元素上的属性,它为它的所有3d子元素建立了一个共享的消失点,或者你可以添加一个 perspective() 元素一开始就发挥作用's 自己的 transform的,这就给出了那个元素自己的深度,这个生成器使用了第二种方法:设置透视滑块,它就会发出 perspective() first in the chain, 恰好是它需要的地方。较小的值, 在三百到六百像素之间, 将消失点靠近元素, 使深度戏剧化;较大的值将效果压平, 朝向温和的倾斜。
3D卡预设在工具里是最快的看这个方法,它设置了六百像素的视角,一个 rotateY 的二十五度,而预览框令人信服地向屏幕中倾斜,将透视滑块转回零,并观看相同的旋转塌陷成平壁球,那前后是两个拖动中的整个课程。
变换起源做什么?
每个旋转和每个尺度都需要一个固定点来旋转,而该点是变换原点。默认情况下,它位于元素的死点,这就是为什么未修改 rotate 在其中间旋转一个盒子,然后旋转一个未修改的盒子 scale zai各个方向上一次向外生长。移动原点,两种行为都发生变化。
将原点设置为 top left 旋转变成摆动,元素像铰接标志一样从左上角枢转。将其设置为 bottom 和一个 scaleY 素(element)从其底座向上增长,而不是对称地扩展,这正是你想要的应该从图表轴上升的条形。生成器提供所有九个关键字位置,中心,四条边和四个角,并在你选择一个的瞬间更新预览,因此旋转和摆动之间的差异是相隔一键。
这是那些在你需要之前几乎看不见的属性之一,然后是唯一能产生你所追求的效果的东西。一个菜单应该从它的顶部边缘展开,一个工具提示应该从它所属的元素中放大,一张卡片应该绕一个角而不是中间旋转,所有这些都是变换源,并且从中看它们都不明显 transform 独自珍惜。
为什么变换不会推动其他元素?
的最有用的特性之一 transform is 也是人们第一次咬到他们时发现最令人惊讶的一个, 变换后的元素不会影响周围的布局, 当你向右平移一个四十像素的框时, 它向右渲染四十像素, 但它仍然保留其在文档流中的原始空间, 所以没有其他任何移动来填补空白, 没有任何东西被推到一边变换是一种油漆时间效应, 在已经计算布局后应用。
这是一个功能,而不是一个错误,而正是它使变换成为动画的正确工具的原因。因为移动元素时带有 transform 不触发回流,浏览器可以在 GPU 上合成更改,并使动画保持每秒 60 帧。移动相同的元素 top 或 left 或 margin 强制浏览器在每一帧上重新计算布局,这是导致动画卡顿和丢帧的最常见原因,如果您想要平滑的运动,则需要动画 transform 並 opacity,并且你不去管布局属性,当你确实需要周围的内容回流时,那是一个你想要布局改变而不是转换的标志,以及一个像这样的工具 flexbox 生成器 或 CSS电网生成器 是正确的起点。
为什么一个固定的孩子闯入了我改造后的元素?
这是看起来像无关事物中的错误的 gotcha,值得您在花费您一个小时之前了解。规范中规定,任何元素都带有 a transform 价值除外 none 成为其定位的后代的遏制块 fixed 或 absolute并且它还创建了一个新的堆叠上下文。这两者都具有远离变换本身的后果。
包含块变化是让人惊讶的 A. position: fixed element 应该锚定到视口,保持原位作为页面滚动。但如果该固定元素的任何祖先都有变换,则固定元素锚定到 那个祖先 相反,突然你的"固定"标头滚动离开内容或你的模态被困在卡片内。变换'的外观没有任何暗示;元素看起来很好,并且三层下方的东西错误地定位了自己。当固定或绝对元素表现得好像被困住一样时,首先要检查的是祖先是否携带变换。堆叠-上下文更改会导致并行类混乱,其中 a z-index 以前突然起作用的情况却并非如此,因为变形后的元素将其子元素密封到自己的堆叠层中。完全相同的行为也适用于 filter 财产,这就是为什么 CSS滤波器生成器 带有相同的警告。
生成器涵盖哪些功能?您何时达到每个功能?
该工具公开了全套常见的变换函数,它有助于了解每个函数的用途而不是随机拖动它们。这是地图。
| 功能 | 它做什么 | 典型用途 |
|---|---|---|
translateX / translateY |
沿着轴移动元件 | 滑入入口、悬停推动、偏移定位 |
rotate |
将元素绕其中心转动(2D) | 倾斜徽章、旋转装载机、有趣的悬停角度 |
scale (X 和 Y) |
生长或收缩元素 | 悬停变焦、弹出效果、按下反馈 |
skewX / skewY |
沿着轴倾斜元件 | 动态横幅、斜体形状、运动提示 |
rotateX / rotateY |
3D空间中转动元素 | 翻牌、倾斜面板、盖流效果 |
perspective |
添加深度,以便正确读取 3D 旋转 | 始终与 rotateX 或 rotateY 配对 |
3D旋转,这两种需要合作伙伴的是,如果没有透视,它就没有什么令人信服的效果,以及负刻度,这值得大声疾呼,因为它不明显。设置 scaleX to 负值水平翻转元素,就像镜子一样,这就是Flip Horizontal预设的工作原理,它是一个真正有用的技巧,镜像一个图标而不是导出第二个资产,一旦你知道允许负值,它就会直接从比例控制中掉出。
生成器如何保持预览的诚实?
1个视觉构建器的失败模式是偏移在预览显示的内容和导出的代码产生什么之间,一个工具以一种方式渲染其预览,另一个方式写入其CSS,这比没有工具更糟糕,因为它教你一个不会再现的值,这个生成器通过构建预览's内联样式和从同一函数复制声明来避免这种情况,所以你看到的实际上是你粘贴的,没有第二条代码路径可以不同意。
这也是为什么输出仅包含您更改的功能。离开 scale 以其一的身份,或者 rotate at 0,表示这些函数只是从字符串中不存在,而不是写成冗余 scale(1) noise。a clean 变换是你可以一目了然地阅读和信任,并且只发出有意义的函数是我依赖的同一学科跨视觉CSS工具,从 梯度生成器 到盒子-影子构建器。如果你正在组装一个更宽的套件, the web开发人员工具包 收集我最常打开的,并且很好地使用它们背后的习惯是在 开发人员生产力工具 指南。
CSS 变换支持哪些浏览器?
CSS变换在当前的每个浏览器中都得到支持,并且已经有十多年了,2D功能,平移,旋转,缩放和倾斜,是通用的和未修复的,3D功能随着 perspective chrome、firefox、safari 和 Edge 中同样得到很好的支持。旧的 -webkit- 並 -moz- 曾经必要的前缀在今天的样式表中是自重,并且该生成器的输出是标准的、未预先固定的 CSS,您可以按书面形式发送。对于权威规则,来自 W3C 的 CSS Transforms Module Level 1 和 Level 2 规范是主要来源,一旦生成器赋予您遵循它们的直觉,它们就值得阅读。
如果您正在构建一个更广泛的视觉工具包 边框半径生成器 and transition builder 是天然的伙伴,因为 hover 上的转换几乎总是想要一个转换来平滑它,这里的一切都运行客户端,你复制的 CSS 是你在没有运行时、没有构建步骤和没有依赖的情况下使用的。
常见问题
CSS变换生成器是什么?
CSS变换生成器是一种可视化工具,它从您选择的设置构建CSS变换值,您使用滑块调整平移、旋转、缩放、倾斜和3D视角,它输出变换声明以及结果的实时预览。
变换函数的顺序重要吗?
是。函数在元素坐标系中从右到左应用,所以平移然后旋转与旋转然后平移不同。平移首先移动元素,然后旋转到位;旋转首先转动轴,因此后面的平移以一定角度将其送出。
CSS变换如何让它看起来像3D?
3D旋转需要透视才能读作深度,在变换开始时添加透视()功能,当你设置透视滑块时,这个生成器会发出这种功能,或者在父元素上放置一个透视属性,在300到600像素左右的值使深度最为戏剧化。
变换起源做什么?
transform-origin 设置 a transform 围绕的点枢转和缩放,默认是元素的中心,将其移动到一个角落,旋转从该角落变成一个摆动;将其移动到一个边,缩放从该边沿增长,而不是向外每个方向增长。
为什么变换不会移动页面上的其他元素?
Transform 是一种油漆时间效果,元素在新的位置渲染,但在布局中仍保留其原始框,因此周围没有任何东西发生移动。这就是 Transform 非常适合动画的原因,也是为什么当您确实需要内容回流时使用保证金、位置或布局属性。
为什么一个固定或绝对的孩子会闯入一个转换后的元素?
Any element with a transform other than none 成为其固定且绝对定位的后代的包含块,并创建一个新的堆叠上下文。一个位置:固定子然后锚定到转换后的父级而不是视口,z 索引排序可以改变。如果必须保持固定到屏幕上,则将子级移到转换后的元素之外。
我应该动画变换而不是顶部、左侧、宽度或高度吗?
是的,为了平滑运动。变换和不透明度是在 GPU 上复合的,不会触发布局,因此它们以 60fps 的速度进行动画处理。顶部、左侧、宽度或高度的动画迫使浏览器重新计算每帧的布局,这是动画简洁的常见原因。
生成的变换 CSS 是免费且安全使用的吗?
是的。该工具是完全免费的,没有注册或使用限制,并且它会发出每个现代浏览器都支持的标准、未修复的 CSS。所有处理都发生在您的浏览器中,因此一旦加载,就不会上传任何内容,该工具会离线工作。
