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

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

CSS中的坐标系的方位

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

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

transform 属性可分为三部分，分别是前置属性、2D变形函数、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;
    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 {
        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}工具类
<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 class="bg-gray-900">
    <img src="http://source.unsplash.com/64x64" class="transform rotate-45 origin-center">
  <div class="bg-gray-900">
    <img src="http://source.unsplash.com/64x64" class="transform rotate-45 origin-left">
  <div class="bg-gray-900">
    <img src="http://source.unsplash.com/64x64" class="transform rotate-45 origin-right">
  <div class="bg-gray-900">
    <img src="http://source.unsplash.com/64x64" class="transform rotate-45 origin-top">
  <div class="bg-gray-900">
    <img src="http://source.unsplash.com/64x64" class="transform rotate-45 origin-bottom">
旋转rotate
transform: rotate(<angle>);
变形函数rotate通过指定角度参数对元素进行2D旋转
旋转前需要设置transform-origin属性，transform-origin属性用于指定旋转的基点。
旋转前若没有设置transform-origin属性则默认根据元素的中心点旋转，即center center位置。
rotate旋转函数参数angle为角度值，单位deg（度数）。
旋转角度angle若设置为正数表示顺时针旋转，若设置为负数则表示逆时针旋转。
若元素设置了perspective属性则可使用rotate3d变形函数实现三维空间内的旋转
例如：设置元素顺时针旋转45度
transform: rotate(45deg);
位移函数的参数是具体的移动距离即偏移量，单位可以是px、em或百分比等。当移动距离为正数时表示指定坐标轴中的正方向移动，当为负数时则表示朝向负方向移动。
元素平移时，若没有使用transform-origin指定基点，则默认基点是元素的中心点。
例如：元素以中心点作为基点，同时向X轴正方向移动100px，向Y轴正方向移动20px。
transform: translate(100px 20px)
<div class="wrapper"></div>
实现方式主要是借助于position:absolute绝对定位的top:50%和left:50%，在配合transform:translate(-50%, -50%)来实现。
Tailwind为位移函数提供了.translate-{amount}工具类以实现元素平移的工具类