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

坐标系

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

CSS中的坐标系的方位

坐标系

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

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

分类

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

• 前置属性

• 2D 变形函数

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

• 3D变形函数

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

语法

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;

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

<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

缩放scale

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

scale

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

语法

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

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

scale

位移translate

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

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

位移函数的参数是具体的移动距离即偏移量，单位可以是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}工具类以实现元素平移的工具类

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

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

translate

扭曲skew

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

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

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

transform:skewY(30deg);

demo

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