Logo Windi CSS

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

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

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

default
gpu
none
CSS
.transform {
  --tw-rotate: 0;
  --tw-rotate-x: 0;
  --tw-rotate-y: 0;
  --tw-rotate-z: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-scale-z: 1;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-translate-z: 0;
  -webkit-transform: rotate(var(--tw-rotate)) rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate-z)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) scaleZ(var(--tw-scale-z)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) translateZ(var(--tw-translate-z));
  -ms-transform: rotate(var(--tw-rotate)) rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate-z)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) scaleZ(var(--tw-scale-z)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) translateZ(var(--tw-translate-z));
  transform: rotate(var(--tw-rotate)) rotateX(var(--tw-rotate-x)) rotateY(var(--tw-rotate-y)) rotateZ(var(--tw-rotate-z)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) scaleZ(var(--tw-scale-z)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) translateZ(var(--tw-translate-z));
}

Transform Style

Утилита в стиле преобразования устанавливает, будут ли дочерние элементы элемента располагаться в трехмерном пространстве или выровнены в плоскости элемента.

flat
3d
CSS
.preserve-3d {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

Transform Origin

Утилиты для указания исходной точки для преобразований элемента.

center
top
top-right
right
bottom-right
bottom
bottom-left
left
top-left
CSS
.origin-center {
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
  transform-origin: center;
}
Персонализация
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
.rotate-90 {
  --tw-rotate: 90deg;
}
Персонализация
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-x-30 {
  --tw-rotate-x: 30deg;
}

Rotate Y

0
6
12
30
45
72.5
90
180
-180
-90
-72.5
-45
-12
-6
CSS
.rotate-y-45 {
  --tw-rotate-y: 45deg;
}

Rotate Z

0
6
12
30
45
72.5
90
180
-180
-90
-72.5
-45
-12
-6
CSS
.rotate-z-12 {
  --tw-rotate-z: 12deg;
}

Transform Scale

Утилиты для масштабирования элементов с помощью преобразования.

0
25
50
75
90
95
100
105
110
125
150
CSS
.scale-90 {
  --tw-scale-x: .9;
  --tw-scale-y: .9;
  --tw-scale-z: .9;
}

Scale X

0
25
50
75
90
95
100
105
110
125
150
CSS
.scale-x-90 {
  --tw-scale-x: .9;
}

Scale Y

0
25
50
75
90
95
100
105
110
125
150
CSS
.scale-y-90 {
  --tw-scale-y: .9;
}

Scale Z

0
25
50
75
90
95
100
105
110
125
150
CSS
.scale-z-90 {
  --tw-scale-z: .9;
}
Персонализация
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-x-45 {
  --tw-skew-x: 45deg;
}

Skew Y

0
6
12
45
72.5
90
180
-180
-90
-72.5
-45
-12
-6
CSS
.skew-y-45 {
  --tw-skew-y: 45deg;
}
Персонализация
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-x-0 {
  --tw-translate-x: 0px;
}

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-y-0 {
  --tw-translate-y: 0px;
}

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
.translate-z-0 {
  --tw-translate-z: 0px;
}
Персонализация

Вы можете настроить глобальную шкалу интервалов в разделах 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
.perspect-lg {
  -webkit-perspective: 32rem;
  perspective: 32rem;
}
Персонализация
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
.perspect-origin-center {
  -webkit-perspective-origin: center;
  perspective-origin: center;
}
Персонализация
windi.config.js
export default {
  theme: {
    extend: {
      perspectiveOrigin: {
        tb150: '150% 150%',
        tb200: '200% 200%',
      },
    },
  },
}