Logo Windi CSS

Transforms

Transform 类型

用于控制元素行为的工具类。

default
gpu
none
CSS
Transform 样式 
用于控制元素的子元素的位置是 3D 空间还是扁平排列的工具类。
flat
3d
CSS
Transform Origin 
用于控制元素 Transform 原点的工具类。
center
top
top-right
right
bottom-right
bottom
bottom-left
left
top-left
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    extend: {
      transformOrigin: {
        24: '6rem',
        full: '100%',
      },
    },
  },
}

Transform 旋转 
用于控制元素旋转的工具类。
0
6
12
45
72.5
90
180
-180
-90
-72.5
-45
-12
-6
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    rotate: {
      sq: '90deg',
    },
  },
}

X 轴旋转 
0
6
12
30
45
72.5
90
180
-180
-90
-72.5
-45
-12
-6
CSS
Y 轴旋转 
0
6
12
30
45
72.5
90
180
-180
-90
-72.5
-45
-12
-6
CSS
Z 轴旋转 
0
6
12
30
45
72.5
90
180
-180
-90
-72.5
-45
-12
-6
CSS
Transform 缩放 
用于控制元素缩放的工具类。
0
25
50
75
90
95
100
105
110
125
150
CSS
X 轴缩放 
0
25
50
75
90
95
100
105
110
125
150
CSS
Y 轴缩放 
0
25
50
75
90
95
100
105
110
125
150
CSS
Z 轴缩放 
0
25
50
75
90
95
100
105
110
125
150
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    scale: {
      half: '.5',
      full: '1',
    },
  },
}

Transform 倾斜 
用于控制元素倾斜的工具类。
X 轴倾斜 
0
6
12
45
72.5
90
180
-180
-90
-72.5
-45
-12
-6
CSS
Y 轴倾斜 
0
6
12
45
72.5
90
180
-180
-90
-72.5
-45
-12
-6
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    extend: {
      skew: {
        sq: '90deg',
      },
    },
  },
}

Transform 平移 
用于控制元素平移的工具类。
X 轴平移 
0
px
full
6
12
7.5
1/2
2/3
3/4
3/5
3.5rem
42px
6em
-px
-full
-6
-12
-7.5
-1/2
-2/3
-3/4
-3/5
-3.5rem
-42px
CSS
Y 轴平移 
0
px
full
6
12
7.5
1/2
2/3
3/4
3/5
3.5rem
42px
6em
-px
-full
-6
-12
-7.5
-1/2
-2/3
-3/4
-3/5
-3.5rem
-42px
CSS
Z 轴平移 
0
px
full
6
12
7.5
1/2
2/3
3/4
3/5
3.5rem
42px
6em
-px
-full
-6
-12
-7.5
-1/2
-2/3
-3/4
-3/5
-3.5rem
-42px
CSS
 Customizing 
你可以在 windi.config.js 文件的 theme.spacing 或者 theme.extend.spacing 部分自定义全局缩放间距：
windi.config.js
export default {
  theme: {
    extend: {
      spacing: {
        72: '18rem',
        84: '21rem',
        96: '24rem',
      },
    },
  },
}

也可以在 windi.config.js 文件的 theme.translate 部分以分割的形式自定义平移缩放的比例。
windi.config.js
export default {
  theme: {
    extend: {
      translate: {
        '1/7': '14.2857143%',
        '2/7': '28.5714286%',
        '3/7': '42.8571429%',
        '4/7': '57.1428571%',
        '5/7': '71.4285714%',
        '6/7': '85.7142857%',
      },
    },
  },
}

Perspective 
用于控制元素与 z=0 平面的距离，使其具有三维位置变换效果的 perspect 工具类。
none
xs
sm
md
lg
xl
2xl
3xl
4xl
5xl
6xl
7xl
100
200
300
400
500
600
700
800px
23rem
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    extend: {
      perspective: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
    },
  },
}

Perspective Origin 
perspect-origin 用于控制元素观察者的位置，用作 perspect 属性的消失点的工具类。
center
top
top-right
right
bottom-right
bottom
bottom-left
left
top-left
[150%]
[-150%]
[150%_150%]
CSS
 Customizing 
windi.config.js
export default {
  theme: {
    extend: {
      perspectiveOrigin: {
        tb150: '150% 150%',
        tb200: '200% 200%',
      },
    },
  },
}