CSS 变换生成器

CSS变换生成器是CSS变换属性的可视化编辑器,您为每个变换功能移动一个滑块 - 平移,旋转,缩放,倾斜,3D功能旋转X,旋转Y和透视 - 并观察效果实时应用于预览元素,然后复制它产生的确切CSS。它还允许您设置变换-原点,每次旋转和缩放的锚点围绕旋转。

Transform property重新定位和重塑一个元素,而不会干扰它周围的布局,一个平移、旋转或缩放的元素仍然占据着它在流中的原始盒子,因此相邻元素不会移动,这使得Transform成为悬停效果、入口动画和任何不应该触发回流的运动的正确工具,可以在一次声明中列出几个功能,它们在元素的坐标空间中从右向左应用,因此顺序真正改变了结果:平移然后旋转移动元素然后旋转到位,而旋转然后平移首先旋转轴并以一定角度将元素送出。

Everything发生在你的浏览器。从一个预设像增长,旋转,翻转或3D卡开始,微调每个功能,复制声明。工具只写你实际更改的功能,所以你永远不会发货冗余的规模(1)或旋转(0deg)。没有帐户,没有上传,一旦页面加载,它就会保持离线工作。

2个细节节省了真正的调试时间 首先,3D旋转只有在视角存在时才看起来是三维的- 要么是视角()功能首先在同一个变换中,因为这个工具发射了它,要么是父级上的视角属性- 否则rotateY简单地将元素压扁 其次,任何具有非无变换的元素都成为其固定且绝对定位的后代的包含块,并创建一个新的堆叠上下文,与过滤器属性完全相同 位置:变换后的父级内部的固定子级锚定到该父级而不是视口,而以前工作的z索引排序可以改变 当变换以与外观无关的方式破坏布局时,那个包含块行为几乎总是原因。