在 X 和 Y 轴上倾斜和旋转
使您的元素倾斜、倾斜或以透视方式出现。独立控制 Skew X 和 Skew Y 值以创建平行四边形形状或动态倾斜。将其与 Rotate 结合起来,在 2D 或 3D 空间中旋转您的元素,打破典型网页设计的刚性水平对齐。
- 动态倾斜:应用 Skew X 使容器看起来像向前或向后倾斜。
- 精确旋转:精确旋转元素以进行创意布局和重叠设计。
- 组合效果:倾斜一个按钮,然后稍微旋转它,以获得有趣、不合时宜的号召性用语。
在悬停时生长、收缩和添加深度
创建响应访客的互动时刻。使用 Scale 属性使图标或图像在悬停时变大,吸引眼睛。向父容器添加 Perspective,使子元素在 3D 空间中旋转,创造出平面设计无法匹配的深度感和沉浸感。
- 基于悬停的缩放:将悬停状态设置为缩放:1.1,以便在按钮或卡片上产生平滑、引人入胜的生长效果。
- 3D-Like深度:使用透视设置,使多个旋转元素感觉像是统一3D场景的一部分。
- 控制原点:更改变换原点以使元素从其中心、顶部或角落缩放。
转型常见问题
了解用户对 Transforms 的询问最多的查询,并在一个地方找到答案。
歪斜或旋转我的文本会让人难以阅读吗?
It can, 如果你走得太过分了, 键是微妙的, 稍微旋转2-5度或倾斜可以增加巨大的视觉趣味, 而不会伤害可读性, 总是预览和测试不同的设备, 对于重要的身体文本, 最好保持变换最小或仅应用到装饰元素。
3D翻转卡可以用这个来制作吗?
您可以非常接近!通过将 Rotate Y(用于翻转)与 Perspective 在父容器上结合起来,您可以创建一张看起来可以翻转的卡。您将使用两个元素(正面和背面),并通过更高级的交互或自定义代码切换它们的可见性以获得完整的解决方案。
这些效果在移动设备上有效吗?
CSS变换所使用的在现代移动浏览器上得到广泛支持,然而复杂的3D视角或激烈的动画在桌面上可能会表现得更好,在真正的手机上检查你的设计,如果需要的话,简化移动效果总是个好主意。
这与 Floating Effects 扩展有何不同?
Great question!Floating Effects是针对自动、连续的动画(如弹跳或漂移的动作),Transform扩展是关于改变元素的核心形状和位置(倾斜、旋转、缩放),通常以静态方式或作为一次性交互(如悬停效果),它们可以一起使用!例如,你可以有一张稍微倾斜的卡片(Transform),也可以轻轻脉冲(Floating Effects)。
