🔄 一个工具箱,
完成所有设计任务

CSS 变换生成器

可视化生成 CSS 变换——旋转、缩放、位移、倾斜,实时交互预览,一键复制完整 transform 属性。

English 中文 日本語 한국어 Español Português Français Deutsch العربية हिन्दी ไทย Tiếng Việt Bahasa Русский

🔄 CSS 变换生成器

CSS 转换指南

CSS 转换可更改元素的位置、大小和方向,而不会影响文档流。旋转、缩放、平移和倾斜可以组合在一个变换属性中,并且它们可以通过 CSS 过渡平滑地进行动画处理。

拖动滑块以查看实时应用的每个变换。虚线矩形显示原始位置,而实心卡显示转换后的结果。当您满意时,复制完整的变换值。

专业提示

常见问题

Q: 翻译和位置有什么区别?
翻译和位置有什么区别?翻译以视觉方式移动元素,而不改变布局流程。位置(上/左)从流中删除元素或移动同级元素。 Translate 也是 GPU 加速的,动画制作速度更快。
Q: 变换会影响布局吗?
变换会影响布局吗?不会。转换后的元素在文档流中保留其原始空间,因此重叠和溢出很常见 - 使用边距或填充来保留空间。
Q: 我可以组合多个变换吗?
我可以组合多个变换吗?是的,将它们以空格分隔的形式列在一个属性中:transform:translateX(10px)rotate(45deg)scale(1.2);它们在坐标系中从右到左应用。
Q: 为什么我的旋转元素模糊?
为什么我的旋转元素模糊?非 90 度角的旋转会导致抗锯齿伪影。添加一个小比例(1.001)或使用 will-change:transform 在某些浏览器中会有所帮助。
Q: 变换可以与动画一起使用吗?
变换可以与动画一起使用吗?是的,变换是制作动画最便宜的属性之一。与 @keyframes 或过渡配对 — GPU 合成即使在移动设备上也能流畅运行。

中国传统色

中国传统色源自「五色观」——青、赤、黄、白、黑,对应五行、方位与季节。古人从矿物与植物中提炼颜料,形成了数百种富有诗意的色名。这些色彩被广泛用于宫廷服饰、建筑彩绘与书画创作,至今仍是设计师的灵感源泉。

胭脂 #9D2933

古代妆饰与衣料的经典红色,由胭脂虫或红花制成

朱砂 #FF461F

矿物颜料,故宫红墙与印章的常用色

黛蓝 #425066

古代女子画眉之色,沉稳内敛

竹青 #789262

竹叶之色,文人雅士钟爱的清雅色调

月白 #D6ECF0

月光般的淡蓝色,明清宫廷常服用色

藤黄 #FFB61E

取自藤本植物汁液,国画重要黄色颜料

藕荷 #E4C6D0

藕色与荷色的结合,温婉柔美

秋香 #D9B611

秋日桂花的黄绿色,明代流行色

石绿 #16A951

矿物孔雀石研磨而成,山水画中的绿色

墨色 #50616D

书法用墨的深灰蓝色,文房四宝之色

Q: 什么是中国传统色?
什么是中国传统色?中国传统色源自「五色观」——青、赤、黄、白、黑对应五行与方位。古人从朱砂、藤黄、石绿等矿物植物中提取颜料,形成了数百种如「月白」「黛蓝」般富有诗意的色名。
Q: 中国红是什么色值?
中国红是什么色值?中国红属于朱砂色系,常用色值 #FF461F(朱红)或 #9D2933(胭脂)。故宫红墙更接近深红色 #A61B29。