Tailwind Transform

CSS3中transform（变形）属性用于设置元素在2D或3D上的旋转、缩放、移动和倾斜

坐标系

transform属性是通过修改CSS视觉格式化模型的坐标空来是实现的，也就是通过修改元素自身的坐标空间，这种修改实际上对应着一个坐标系统映射转换的矩阵。通过变形变换，元素可实现在二维和三维空间内的旋转、偏移、缩放和倾斜。

CSS中的坐标系的方位

坐标轴	描述
X轴 正方向	水平向右
Y轴 正方向	垂直向下
Z轴 正方向	从屏幕到用户

坐标系

transform属性是修改坐标系统，当最终改变的只是元素的视觉渲染，是在元素布局计算后生效的，因此在布局层面上并没有影响。

网页布局实际上遵循的是坐标系统的概念，浏览器在实地渲染和现实页面前都会进行布局计算，以得到网页中所有元素对应的坐标位置。一旦元素的坐标位置或尺寸发生改变，浏览器会重新进行布局计算，重新计算的过程叫做回流（reflow）。一般而言transform变形是不会引发浏览器的回流。

分类

transform属性可分为三部分，分别是前置属性、2D变形函数、3D变形函数。

• 前置属性

前置属性	描述
transform-origin	用于设定元素变形的中心点，默认中心点为元素的正中心。
transform-style	用于指定舞台为2D或3D
perspective	用于指定3D视距
perspective-origin	用于指定视距的基点
backface-visibility	3D舞台背景是否可视，即是否可以看到3D背景。

• 2D 变形函数

2D变形应用在X轴和Y轴上

2D变形函数	描述
rotate	2D旋转
skew	2D扭曲
scale	2D缩放
translate	2D移动
matrix	2D矩阵

• 3D变形函数

2D变形应用在X轴、Y轴、Z轴

3D变形函数	描述
rotate3d	3D旋转
scale3d	3D缩放
translate3d	3D移动
maxtrix3d	3D矩阵

语法

transform: none | <transform-function> [ <transform-function> ] *

transform变形属性可指定为关键字none或一个或多个transfrom-function变形函数，transform-function表示应用到元素上的一个或多个CSS变形函数，变形函数按从左到右的顺序相乘，这意味着复合变形按从右到左的顺序执行。

变形函数

transform: none | rotate | scale | skew | translate | matrix

transform属性实现了一些可用SVG实现的效果，可用于inline内联元素和block块级元素，主要用于动画的制作。

基点tranform origin

CSS中transform-origin属性用于设置旋转元素的基点位置，transform-origin属性允许改变被转换元素的位置，2D转换元素能过够改变元素的X和Y轴，3D转换元素能改变其Z轴。

transform-origin: x-axis y-axis z-axis;

属性值	描述
x-axis	定义视图被置于X轴的位置，可能值为left/center/right/length/%。
y-axis	定义视图被置于Y轴的位置，可能值为top/center/bottom/length/%。
z-axis	定义视图被置于Z轴的位置，可能值为length。

transform-origin默认值为50% 50%等效于center center，适用于所有块级元素及某些内联元素。

例如：摆动的小球

<style>
.sphere {
    width: 60px;
    height: 60px;
    background: #9485FD;
    border-radius: 100%;
    margin: 280px auto;
    background: radial-gradient(circle at top center, #c6bff6, #6959d8, #372a91);
    transform-origin: center -200px;
    animation: clock 4s infinite linear;
    position: relative;
}

.sphere::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 1px;
    height: 200px;
    border-left: 1px #9485FD dashed;
}

@keyframes clock {
    0% {
        transform: rotate(0deg)
    }
    25% {
        transform: rotate(30deg)
    }
    50% {
        transform: rotate(0deg)
    }
    75% {
        transform: rotate(-30deg)
    }
    100% {
        transform: rotate(0deg)
    }
}
</style>
<div class="sphere"></div>

源码地址：https://codepen.io/junchow/pen/MWKbwQj?editors=1100

Tailwind抓门为元素变形基点提供了origin-{keyword}工具类

工具类	属性	描述
.origin-center	transform-origin:center;	设置元素变形基点为中心
.origin-left	transform-origin:left;	设置元素变形基点为左中
.origin-right	transform-origin:right;	设置元素变形基点为右中
.origin-top	transform-origin:top	设置元素变形基点为顶中
.origin-bottom	transform-origin:bottom;	设置元素变形基点为底中
.origin-top-right	transform-origin:top right;	设置元素变形基点为右上
.origin-top-left	transform-origin:top left;	设置元素变形基点为左上
.origin-bottom-right	transform-origin:bottom right;	设置元素变形基点为右下
.origin-bottom-left	transform-origin:bottom left;	设置元素变形基点为左下

origin

<link href="https://unpkg.com/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js" integrity="sha256-KzZiKy0DWYsnwMF+X1DvQngQ2/FxF7MF3Ff72XcpuPs=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>

<div class="container mx-auto my-12 p-12 bg-gray-100 flex items-center justify-center space-x-12">
  <div class="bg-gray-900">
    <img src="http://source.unsplash.com/64x64">
  </div>
  <div class="bg-gray-900">
    <img src="http://source.unsplash.com/64x64" class="transform rotate-45 origin-center">
  </div>
  <div class="bg-gray-900">
    <img src="http://source.unsplash.com/64x64" class="transform rotate-45 origin-left">
  </div>
  <div class="bg-gray-900">
    <img src="http://source.unsplash.com/64x64" class="transform rotate-45 origin-right">
  </div>
  <div class="bg-gray-900">
    <img src="http://source.unsplash.com/64x64" class="transform rotate-45 origin-top">
  </div>
  <div class="bg-gray-900">
    <img src="http://source.unsplash.com/64x64" class="transform rotate-45 origin-bottom">
  </div>
</div>

旋转rotate

transform: rotate(<angle>);

• 变形函数rotate通过指定角度参数对元素进行2D旋转
• 旋转前需要设置transform-origin属性，transform-origin属性用于指定旋转的基点。
• 旋转前若没有设置transform-origin属性则默认根据元素的中心点旋转，即center center位置。
• rotate旋转函数参数angle为角度值，单位deg（度数）。
• 旋转角度angle若设置为正数表示顺时针旋转，若设置为负数则表示逆时针旋转。
• 若元素设置了perspective属性则可使用rotate3d变形函数实现三维空间内的旋转

例如：设置元素顺时针旋转45度

transform: rotate(45deg);

demo

Tailwind为变形函数rotate提供的工具类

工具类	属性	描述
.rotate-0	--transform-rotate:0	设置元素旋转角度为0度
.rotate-45	--transform-rotate:45deg	设置元素顺时针旋转45度
.rotate-90	--transform-rotate:90deg	设置元素顺时针旋转90度
.rotate-180	--transform-rotate:180deg	设置元素顺时针旋转180度
.-rotate-180	--transform-rotate:-180deg	设置元素逆时针旋转180度
.-rotate-90	--transform-rotate:-90deg	设置元素逆时针旋转90度
.-rotate-45	--transform-rotate:-45deg	设置元素逆时针旋转45度

rotate

缩放scale

CSS变形函数scale用于修改元素的缩放大小，可通过向量形式定义缩放值来放大或缩小元素，同时也可以在不同的方向上设置不同的缩放值。

scale

scale()仅适用于欧几里德平面（二维平面，2D）上的收缩变形，若需要进行空间缩放则需要使用scale3D()。

语法

scale(sx)
scale(sx, sy)
scaleX(sx)
scaleY(sy)

缩放函数	描述
scaleX(x)	元素仅水平方向缩放，X轴缩放。
scaleY(y)	元素仅垂直方向缩放，Y轴缩放。
scale(x, y)	元素水平和Y轴同时缩放

参数	类型	值
sx	number	缩放向量的横坐标
sy	number	缩放向量的纵坐标，若未设置则默认设置为sx进而保持均等缩放。

Tailwind专门为scale缩放提供了scale-{percentage}、scale-x-{percentage}、scale-y-{percentage}三种缩放形式的缩放工具类。

工具类	属性	描述
.scale-0	--transform-scale-x:0; --transform-scale-y:0;	设置元素缩放比例为0
.scale-50	--transform-scale-x:.5; --transform-scale-y:.5;	设置元素缩放比例为50%
.scale-75	--transform-scale-x:.75; --transform-scale-y:.75;	设置元素缩放比例为75%
.scale-90	--transform-scale-x:.9; --transform-scale-y:.9;	设置元素缩放比例为90%
.scale-95	--transform-scale-x:.95; --transform-scale-y:.95;	设置元素缩放比例为95%
.scale-100	--transform-scale-x:1; --transform-scale-y:1;	设置元素缩放比例为100%
.scale-105	--transform-scale-x:1.05; --transform-scale-y:1.05;	设置元素缩放比例为105%
.scale-110	--transform-scale-x:1.1; --transform-scale-y:1.1;	设置元素缩放比例为110%
.scale-125	--transform-scale-x:1.25; --transform-scale-y:1.25;	设置元素缩放比例为125%
.scale-150	--transform-scale-x:1.5; --transform-scale-y:1.5;	设置元素缩放比例为150%

scale

位移translate

CSS3中变形函数translate可以将元素沿着X轴或Y轴移动，因为又可以细分三个位移函数

transform: translate(<translate-value>[, <translate-value>]);

位移函数	描述
translate(x, y)	元素在水平方向和垂直方向同时移动
translateX(x)	元素在水平方向移动即在X轴方向移动
translateY(y)	元素在垂直方向移动即在Y轴方向移动
translateZ(z)	元素验证Z轴方向移动指定距离，前提是元素本身或父元素已设置透视值。

位移函数的参数是具体的移动距离即偏移量，单位可以是px、em或百分比等。当移动距离为正数时表示指定坐标轴中的正方向移动，当为负数时则表示朝向负方向移动。

元素平移时，若没有使用transform-origin指定基点，则默认基点是元素的中心点。

例如：元素以中心点作为基点，同时向X轴正方向移动100px，向Y轴正方向移动20px。

transform: translate(100px 20px)

demo

例如：使用位移函数实现未指定宽高的元素水平和垂直居中

<style>
.wrapper{
  padding:20px;
  background-color:orange;
  border-radius:5px;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
}
</style>
<div class="wrapper"></div>

实现方式主要是借助于position:absolute绝对定位的top:50%和left:50%，在配合transform:translate(-50%, -50%)来实现。

Tailwind为位移函数提供了.translate-{amount}工具类以实现元素平移的工具类

工具类	属性	描述
.translate-x-0	--transform-translate-x:0;	设置元素基点沿X轴方向移动0距离
.translate-x-px	--transform-translate-x:1px;	设置元素基点沿X轴正方向移动1px距离
.translate-x-1	--transform-translate-x:0.25rem;	设置元素基点沿X轴正方向移动0.25rem距离
.-translate-x-1	--transform-translate-x:-0.25rem;	设置元素基点沿X轴负方向移动0.25rem距离
.translate-x-full	--transform-translate-x:100%;	设置元素基点沿X轴正方向移动自身100%距离
.translate-x-1/2	--transform-translate-x:50%;	设置元素基点沿X轴正方向移动自身50%距离

其它Y轴和距离写法雷同，不一一列举。

例如：https://codepen.io/junchow/pen/MWKbrBR?editors=1000

translate

扭曲skew

CSS的变形函数skew提供了2D倾斜变形，即在二维平面内实现扭曲变形的效果，简单来说就是对盒子沿着基点进行倾斜，因此skew变形函数参数的单位是角度值。

根据坐标轴方向可将skew函数细分为三个子函数

扭曲函数	描述
skewX(angle)	元素沿2D平面的X轴倾斜旋转，即在水平方向上扭曲变形。
skewY(angle)	元素沿2D平面的Y轴倾斜旋转，即在垂直方向上扭曲变形。
skew(x-angle, y-angle)	元素同时沿X轴和Y轴倾斜旋转

例如：设置元素基点沿Y轴正方向倾斜30度

transform:skewY(30deg);

demo

Tailwind使用.skew-x-{degree}和.skew-y-{degree}工具类实现skew倾斜函数中常见的方式。

工具类	属性	描述
.skew-x-3	--transform-skew-x:3deg;	元素基点沿X轴正方向倾斜3度
.skew-x-6	--transform-skew-x:6deg;	元素基点沿X轴正方向倾斜6度
.skew-x-12	--transform-skew-x:12deg;	元素基点沿X轴正方向倾斜12度
...	...	...