Logo Windi CSS

Трансформация

Тип трансформации

Утилиты для управления поведением трансформации.

default
gpu
none
CSS
Transform Style 
Утилита в стиле преобразования устанавливает, будут ли дочерние элементы элемента располагаться в трехмерном пространстве или выровнены в плоскости элемента.
flat
3d
CSS
Transform Origin 
Утилиты для указания исходной точки для преобразований элемента.
center
top
top-right
right
bottom-right
bottom
bottom-left
left
top-left
CSS
 Персонализация 
windi.config.js
export default {
  theme: {
    extend: {
      transformOrigin: {
        24: '6rem',
        full: '100%',
      },
    },
  },
}

Transform Rotate 
Утилиты для вращения элементов с преобразованием.
0
6
12
45
72.5
90
180
-180
-90
-72.5
-45
-12
-6
CSS
 Персонализация 
windi.config.js
export default {
  theme: {
    rotate: {
      sq: '90deg',
    },
  },
}

Rotate X 
0
6
12
30
45
72.5
90
180
-180
-90
-72.5
-45
-12
-6
CSS
Rotate Y 
0
6
12
30
45
72.5
90
180
-180
-90
-72.5
-45
-12
-6
CSS
Rotate Z 
0
6
12
30
45
72.5
90
180
-180
-90
-72.5
-45
-12
-6
CSS
Transform Scale 
Утилиты для масштабирования элементов с помощью преобразования.
0
25
50
75
90
95
100
105
110
125
150
CSS
Scale X 
0
25
50
75
90
95
100
105
110
125
150
CSS
Scale Y 
0
25
50
75
90
95
100
105
110
125
150
CSS
Scale Z 
0
25
50
75
90
95
100
105
110
125
150
CSS
 Персонализация 
windi.config.js
export default {
  theme: {
    scale: {
      half: '.5',
      full: '1',
    },
  },
}

Transform Skew 
Утилиты для перекоса элементов с трансформацией.
Skew X 
0
6
12
45
72.5
90
180
-180
-90
-72.5
-45
-12
-6
CSS
Skew Y 
0
6
12
45
72.5
90
180
-180
-90
-72.5
-45
-12
-6
CSS
 Персонализация 
windi.config.js
export default {
  theme: {
    extend: {
      skew: {
        sq: '90deg',
      },
    },
  },
}

Transform Translate 
Утилиты для перевода элементов с трансформацией.
Translate 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
Translate 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
Translate 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
 Персонализация 
Вы можете настроить глобальную шкалу интервалов в разделах theme.spacing или theme.extend.spacing вашего файла windi.config.js:
windi.config.js
export default {
  theme: {
    extend: {
      spacing: {
        72: '18rem',
        84: '21rem',
        96: '24rem',
      },
    },
  },
}

Чтобы настроить масштаб перевода отдельно, используйте раздел theme.translate в файле windi.config.js.
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%',
      },
    },
  },
}

Перспектива 
Утилита perspect определяет расстояние между плоскостью z=0 и пользователем, чтобы придать трехмерному позиционируемому элементу некоторую перспективу.
none
xs
sm
md
lg
xl
2xl
3xl
4xl
5xl
6xl
7xl
100
200
300
400
500
600
700
800px
23rem
CSS
 Персонализация 
windi.config.js
export default {
  theme: {
    extend: {
      perspective: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
    },
  },
}

Perspective Origin 
Утилита perspect-origin определяет позицию, на которую смотрит зритель. Он используется как точка схода утилитой перспектива.
center
top
top-right
right
bottom-right
bottom
bottom-left
left
top-left
[150%]
[-150%]
[150%_150%]
CSS
 Персонализация 
windi.config.js
export default {
  theme: {
    extend: {
      perspectiveOrigin: {
        tb150: '150% 150%',
        tb200: '200% 200%',
      },
    },
  },
}