CSS Transform 可视化

通过滑块实时调节 2D/3D 变换参数,可视化预览 translate、rotate、scale、skew 效果

Transform

Translate

Rotate

Scale

Skew

CSS 代码
transform: none;

CSS Transform 说明

变换函数

  • translate() — 平移元素
  • rotate() — 旋转元素
  • scale() — 缩放元素
  • skew() — 倾斜元素
  • perspective() — 3D 透视距离

使用场景

  • hover 动画效果
  • 卡片翻转效果
  • 3D 旋转展示
  • 元素定位偏移