@amsterdamdatalabs/enact-extensions 0.1.37 → 0.1.47

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/top-right-bottom-left.mdx

@@ -0,0 +1,296 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";
+import { CustomizingYourSpacingScale } from "@/components/content.tsx";
+import { Stripes } from "@/components/stripes.tsx";
+
+export const title = "top / right / bottom / left";
+export const description = "Utilities for controlling the placement of positioned elements.";
+
+<ApiTable
+  rows={[
+    { prefix: "inset", property: "inset" },
+    { prefix: "inset-x", property: "inset-inline" },
+    { prefix: "inset-y", property: "inset-block" },
+    { prefix: "inset-s", property: "inset-inline-start" },
+    { prefix: "inset-e", property: "inset-inline-end" },
+    { prefix: "inset-bs", property: "inset-block-start" },
+    { prefix: "inset-be", property: "inset-block-end" },
+    { prefix: "top", property: "top" },
+    { prefix: "right", property: "right" },
+    { prefix: "bottom", property: "bottom" },
+    { prefix: "left", property: "left" },
+  ].flatMap(({ prefix, property }) =>
+    [
+      ["<number>", "calc(var(--spacing) * <number>)"],
+      ["<number>", "calc(var(--spacing) * -<number>)", true],
+      ["<fraction>", "calc(<fraction> * 100%)"],
+      ["<fraction>", "calc(<fraction> * -100%)", true],
+      ["px", "1px"],
+      ["px", "-1px", true],
+      ["full", "100%"],
+      ["full", "-100%", true],
+      ["auto", "auto"],
+      ["(<custom-property>)", "var(<custom-property>)"],
+      ["[<value>]", "<value>"],
+    ].map(([suffix, value, negative]) => [`${negative ? "-" : ""}${prefix}-${suffix}`, `${property}: ${value};`]),
+  )}
+/>
+
+## Examples
+
+### Basic example
+
+Use `top-<number>`, `right-<number>`, `bottom-<number>`, `left-<number>`, and `inset-<number>` utilities like `top-0` and `bottom-4` to set the horizontal or vertical position of a [positioned element](/docs/position):
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid grid-cols-3 grid-rows-3 place-items-center gap-4 font-mono text-sm leading-6 font-bold text-white">
+      <div className="relative size-18 rounded-lg sm:size-32">
+        <div className="absolute inset-0">
+          <Stripes border className="h-full rounded-lg" />
+        </div>
+        <div className="absolute top-0 left-0 flex size-16 items-center justify-center rounded-lg bg-purple-500 p-4">
+          01
+        </div>
+      </div>
+      <div className="relative size-18 rounded-lg sm:size-32">
+        <div className="absolute inset-0">
+          <Stripes border className="h-full rounded-lg" />
+        </div>
+        <div className="absolute inset-x-0 top-0 flex h-16 items-center justify-center rounded-lg bg-purple-500 p-4">
+          02
+        </div>
+      </div>
+      <div className="relative size-18 rounded-lg sm:size-32">
+        <div className="absolute inset-0">
+          <Stripes border className="h-full rounded-lg" />
+        </div>
+        <div className="absolute top-0 right-0 flex size-16 items-center justify-center rounded-lg bg-purple-500 p-4">
+          03
+        </div>
+      </div>
+      <div className="relative size-18 rounded-lg sm:size-32">
+        <div className="absolute inset-0">
+          <Stripes border className="h-full rounded-lg" />
+        </div>
+        <div className="absolute inset-y-0 left-0 flex w-16 items-center justify-center rounded-lg bg-purple-500 p-4">
+          04
+        </div>
+      </div>
+      <div className="relative size-18 rounded-lg sm:size-32">
+        <div className="absolute inset-0">
+          <Stripes border className="h-full rounded-lg" />
+        </div>
+        <div className="absolute inset-0 flex items-center justify-center rounded-lg bg-purple-500 p-4">05</div>
+      </div>
+      <div className="relative size-18 rounded-lg sm:size-32">
+        <div className="absolute inset-0">
+          <Stripes border className="h-full rounded-lg" />
+        </div>
+        <div className="absolute inset-y-0 right-0 flex w-16 items-center justify-center rounded-lg bg-purple-500 p-4">
+          06
+        </div>
+      </div>
+      <div className="relative size-18 rounded-lg sm:size-32">
+        <div className="absolute inset-0">
+          <Stripes border className="h-full rounded-lg" />
+        </div>
+        <div className="absolute bottom-0 left-0 flex size-16 items-center justify-center rounded-lg bg-purple-500 p-4">
+          07
+        </div>
+      </div>
+      <div className="relative size-18 rounded-lg sm:size-32">
+        <div className="absolute inset-0">
+          <Stripes border className="h-full rounded-lg" />
+        </div>
+        <div className="absolute inset-x-0 bottom-0 flex h-16 items-center justify-center rounded-lg bg-purple-500 p-4">
+          08
+        </div>
+      </div>
+      <div className="relative size-18 rounded-lg sm:size-32">
+        <div className="absolute inset-0">
+          <Stripes border className="h-full rounded-lg" />
+        </div>
+        <div className="absolute right-0 bottom-0 flex size-16 items-center justify-center rounded-lg bg-purple-500 p-4">
+          09
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:inset-x-0,inset-y-0,inset-0,right-0,left-0,top-0,bottom-0] -->
+<!-- Pin to top left corner -->
+<div class="relative size-32 ...">
+  <div class="absolute top-0 left-0 size-16 ...">01</div>
+</div>
+
+<!-- Span top edge -->
+<div class="relative size-32 ...">
+  <div class="absolute inset-x-0 top-0 h-16 ...">02</div>
+</div>
+
+<!-- Pin to top right corner -->
+<div class="relative size-32 ...">
+  <div class="absolute top-0 right-0 size-16 ...">03</div>
+</div>
+
+<!-- Span left edge -->
+<div class="relative size-32 ...">
+  <div class="absolute inset-y-0 left-0 w-16 ...">04</div>
+</div>
+
+<!-- Fill entire parent -->
+<div class="relative size-32 ...">
+  <div class="absolute inset-0 ...">05</div>
+</div>
+
+<!-- Span right edge -->
+<div class="relative size-32 ...">
+  <div class="absolute inset-y-0 right-0 w-16 ...">06</div>
+</div>
+
+<!-- Pin to bottom left corner -->
+<div class="relative size-32 ...">
+  <div class="absolute bottom-0 left-0 size-16 ...">07</div>
+</div>
+
+<!-- Span bottom edge -->
+<div class="relative size-32 ...">
+  <div class="absolute inset-x-0 bottom-0 h-16 ...">08</div>
+</div>
+
+<!-- Pin to bottom right corner -->
+<div class="relative size-32 ...">
+  <div class="absolute right-0 bottom-0 size-16 ...">09</div>
+</div>
+```
+
+</Figure>
+
+### Using negative values
+
+To use a negative top/right/bottom/left value, prefix the class name with a dash to convert it to a negative value:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex justify-center font-mono text-sm leading-6 font-bold text-white">
+      <div className="relative size-18 rounded-lg sm:h-32 sm:w-32">
+        <div className="absolute inset-0">
+          <Stripes border className="h-full rounded-lg" />
+        </div>
+        <div className="absolute -top-4 -left-4 flex items-center justify-center rounded-lg bg-purple-500 p-4"></div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:-left-4,-top-4] -->
+<div class="relative size-32 ...">
+  <div class="absolute -top-4 -left-4 size-14 ..."></div>
+</div>
+```
+
+</Figure>
+
+### Using logical properties
+
+Use `inset-s-<number>` or `inset-e-<number>` utilities like `inset-s-0` and `inset-e-4` to set the `inset-inline-start` and `inset-inline-end` [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties/Basic_concepts), which map to either the left or right side based on the text direction:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid grid-cols-2 place-items-center gap-x-4">
+      <div className="flex flex-col items-start gap-y-4">
+        <p className="text-sm font-medium">Left-to-right</p>
+        <div className="relative size-18 rounded-lg sm:size-32">
+          <div className="absolute inset-0">
+            <Stripes border className="h-full rounded-lg" />
+          </div>
+          <div className="absolute top-0 left-0 flex size-14 items-center justify-center rounded-lg bg-purple-500 p-4"></div>
+        </div>
+      </div>
+      <div className="flex flex-col items-end gap-y-4">
+        <p className="text-sm font-medium">Right-to-left</p>
+        <div className="relative size-18 rounded-lg sm:size-32">
+          <div className="absolute inset-0">
+            <Stripes border className="h-full rounded-lg" />
+          </div>
+          <div className="absolute top-0 right-0 flex size-14 items-center justify-center rounded-lg bg-purple-500 p-4"></div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:inset-s-0] -->
+<div dir="ltr">
+  <div class="relative size-32 ...">
+    <div class="absolute inset-s-0 top-0 size-14 ..."></div>
+  </div>
+  <div>
+    <div dir="rtl">
+      <div class="relative size-32 ...">
+        <div class="absolute inset-s-0 top-0 size-14 ..."></div>
+      </div>
+      <div></div>
+    </div>
+  </div>
+</div>
+```
+
+</Figure>
+
+For more control, you can also use the [LTR and RTL modifiers](/docs/hover-focus-and-other-states#rtl-support) to conditionally apply specific styles depending on the current text direction.
+
+### Using a custom value
+
+<UsingACustomValue utilities={["inset", "top"]} name="position" value="3px" variable="position" />
+
+### Responsive design
+
+<ResponsiveDesign
+  properties={[
+    "inset",
+    "inset-x",
+    "inset-y",
+    "inset-s",
+    "inset-e",
+    "inset-bs",
+    "inset-be",
+    "top",
+    "left",
+    "bottom",
+    "right",
+  ]}
+  defaultClass="top-4"
+  featuredClass="top-6"
+/>
+
+## Customizing your theme
+
+<CustomizingYourSpacingScale
+  utilities={[
+    "inset",
+    "inset-x",
+    "inset-y",
+    "inset-s",
+    "inset-e",
+    "inset-bs",
+    "inset-be",
+    "top",
+    "left",
+    "bottom",
+    "right",
+  ]}
+/>

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/touch-action.mdx

@@ -0,0 +1,95 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import { ResponsiveDesign } from "@/components/content.tsx";
+
+export const title = "touch-action";
+export const description = "Utilities for controlling how an element can be scrolled and zoomed on touchscreens.";
+
+<ApiTable
+  rows={[
+    ["touch-auto", "touch-action: auto;"],
+    ["touch-none", "touch-action: none;"],
+    ["touch-pan-x", "touch-action: pan-x;"],
+    ["touch-pan-left", "touch-action: pan-left;"],
+    ["touch-pan-right", "touch-action: pan-right;"],
+    ["touch-pan-y", "touch-action: pan-y;"],
+    ["touch-pan-up", "touch-action: pan-up;"],
+    ["touch-pan-down", "touch-action: pan-down;"],
+    ["touch-pinch-zoom", "touch-action: pinch-zoom;"],
+    ["touch-manipulation", "touch-action: manipulation;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use utilities like `touch-pan-y` and `touch-pinch-zoom` to control how an element can be scrolled (panned) and zoomed (pinched) on touchscreens:
+
+<Figure hint="Try panning these images on a touchscreen">
+
+<Example>
+  {
+    <div className="grid gap-x-6 gap-y-14 font-mono font-bold sm:grid-cols-2">
+      <div className="flex flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">touch-auto</p>
+        <div className="grid h-48 w-full touch-auto overflow-auto rounded-lg">
+          <img
+            className="col-span-1 col-start-1 col-end-1 w-[150%] max-w-none"
+            src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&h=400&q=80"
+          />
+        </div>
+      </div>
+      <div className="flex flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">touch-none</p>
+        <div className="h-48 w-full touch-none overflow-auto rounded-lg">
+          <img
+            className="w-[150%] max-w-none"
+            src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&h=400&q=80"
+          />
+        </div>
+      </div>
+      <div className="flex flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">touch-pan-x</p>
+        <div className="h-48 w-full touch-pan-x overflow-auto rounded-lg">
+          <img
+            className="w-[150%] max-w-none"
+            src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&h=400&q=80"
+          />
+        </div>
+      </div>
+      <div className="flex flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">touch-pan-y</p>
+        <div className="h-48 w-full touch-pan-y overflow-auto rounded-lg">
+          <img
+            className="w-[150%] max-w-none"
+            src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&h=400&q=80"
+          />
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:overflow-auto,touch-auto,touch-none,touch-pan-x,touch-pan-y] -->
+<div class="h-48 w-full touch-auto overflow-auto ...">
+  <img class="h-auto w-[150%] max-w-none" src="..." />
+</div>
+<div class="h-48 w-full touch-none overflow-auto ...">
+  <img class="h-auto w-[150%] max-w-none" src="..." />
+</div>
+<div class="h-48 w-full touch-pan-x overflow-auto ...">
+  <img class="h-auto w-[150%] max-w-none" src="..." />
+</div>
+<div class="h-48 w-full touch-pan-y overflow-auto ...">
+  <img class="h-auto w-[150%] max-w-none" src="..." />
+</div>
+```
+
+</Figure>
+
+### Responsive design
+
+<ResponsiveDesign property="touch-action" defaultClass="touch-pan-x" featuredClass="touch-auto" />

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/transform-origin.mdx

@@ -0,0 +1,130 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";
+
+export const title = "transform-origin";
+export const description = "Utilities for specifying the origin for an element's transformations.";
+
+<ApiTable
+  rows={[
+    ["origin-center", "transform-origin: center;"],
+    ["origin-top", "transform-origin: top;"],
+    ["origin-top-right", "transform-origin: top right;"],
+    ["origin-right", "transform-origin: right;"],
+    ["origin-bottom-right", "transform-origin: bottom right;"],
+    ["origin-bottom", "transform-origin: bottom;"],
+    ["origin-bottom-left", "transform-origin: bottom left;"],
+    ["origin-left", "transform-origin: left;"],
+    ["origin-top-left", "transform-origin: top left;"],
+    ["origin-(<custom-property>)", "transform-origin: var(<custom-property>);"],
+    ["origin-[<value>]", "transform-origin: <value>;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use utilities like `origin-top` and `origin-bottom-left` to set an element's transform origin:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex scroll-p-8 overflow-scroll sm:block sm:overflow-visible">
+      <div className="flex shrink-0 items-center justify-around gap-12 p-8 px-12 pb-10 font-mono font-bold sm:gap-4 sm:px-8">
+        <div className="flex shrink-0 flex-col items-center">
+          <p className="mb-9 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+            origin-center
+          </p>
+          <div className="relative">
+            <div className="absolute inset-0">
+              <img
+                className="size-24 rounded-lg object-cover opacity-25"
+                src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
+              />
+            </div>
+            <div className="relative z-10 origin-center rotate-45">
+              <img
+                className="size-24 rounded-lg object-cover shadow-xl"
+                src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
+              />
+              <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
+            </div>
+          </div>
+        </div>
+        <div className="flex shrink-0 flex-col items-center">
+          <p className="mb-9 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+            origin-top-left
+          </p>
+          <div className="relative">
+            <div className="absolute inset-0">
+              <img
+                className="size-24 rounded-lg object-cover opacity-25"
+                src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
+              />
+            </div>
+            <div className="relative z-10 origin-top-left rotate-12">
+              <img
+                className="size-24 rounded-lg object-cover shadow-xl"
+                src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
+              />
+              <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
+            </div>
+          </div>
+        </div>
+        <div className="flex shrink-0 flex-col items-center">
+          <p className="mb-9 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+            origin-bottom
+          </p>
+          <div className="relative">
+            <div className="absolute inset-0">
+              <img
+                className="size-24 rounded-lg object-cover opacity-25"
+                src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
+              />
+            </div>
+            <div className="relative z-10 origin-bottom -rotate-12">
+              <img
+                className="size-24 rounded-lg object-cover shadow-xl"
+                src="https://images.unsplash.com/photo-1554629947-334ff61d85dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&h=1000&q=90"
+              />
+              <div className="absolute inset-0 rounded-lg ring-1 ring-black/10 ring-inset"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:origin-center,origin-top-left,origin-bottom] -->
+<img class="origin-center rotate-45 ..." src="/img/mountains.jpg" />
+<img class="origin-top-left rotate-12 ..." src="/img/mountains.jpg" />
+<img class="origin-bottom -rotate-12 ..." src="/img/mountains.jpg" />
+```
+
+</Figure>
+
+### Using a custom value
+
+<UsingACustomValue
+  element="img"
+  elementAttributes={{ src: "/img/mountains.jpg" }}
+  utility="origin"
+  name="transform origin"
+  value="33%_75%"
+  variable="transform-origin"
+/>
+
+### Responsive design
+
+<ResponsiveDesign
+  element="img"
+  elementAttributes={{ src: "/img/mountains.jpg" }}
+  property="transform-origin"
+  defaultClass="origin-center"
+  featuredClass="origin-top"
+/>

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/transform-style.mdx

@@ -0,0 +1,110 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import { ResponsiveDesign } from "@/components/content.tsx";
+
+export const title = "transform-style";
+export const description = "Utilities for controlling if an elements children are placed in 3D space.";
+
+<ApiTable
+  rows={[
+    ["transform-3d", "transform-style: preserve-3d;"],
+    ["transform-flat", "transform-style: flat;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use `transform-3d` to position children in 3D space:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex flex-col justify-around gap-8 text-sm leading-6 font-bold text-white sm:flex-row sm:gap-0">
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+          transform-flat
+        </p>
+        <div className="size-40 p-10">
+          <div className="size-20 rotate-[0.75_1_0.75_45deg] transform-flat *:backface-visible">
+            <div className="absolute inset-0 translate-z-12 rotate-x-0 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 dark:bg-sky-400/85 dark:text-white">
+              1
+            </div>
+            <div className="absolute inset-0 -translate-z-12 rotate-y-180 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 opacity-75 dark:bg-sky-400/85 dark:text-white">
+              2
+            </div>
+            <div className="absolute inset-0 translate-x-12 rotate-y-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 opacity-75 dark:bg-sky-400/85 dark:text-white">
+              3
+            </div>
+            <div className="absolute inset-0 -translate-x-12 -rotate-y-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 dark:bg-sky-400/85 dark:text-white">
+              4
+            </div>
+            <div className="absolute inset-0 -translate-y-12 rotate-x-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 opacity-75 dark:bg-sky-400/85 dark:text-white">
+              5
+            </div>
+            <div className="absolute inset-0 translate-y-12 -rotate-x-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 dark:bg-sky-400/85 dark:text-white">
+              6
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">transform-3d</p>
+        <div className="size-40 p-10">
+          <div className="size-20 rotate-[0.75_1_0.75_45deg] transform-3d *:backface-visible">
+            <div className="absolute inset-0 translate-z-12 rotate-x-0 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 dark:bg-sky-400/85 dark:text-white">
+              1
+            </div>
+            <div className="absolute inset-0 -translate-z-12 rotate-y-180 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 opacity-75 dark:bg-sky-400/85 dark:text-white">
+              2
+            </div>
+            <div className="absolute inset-0 translate-x-12 rotate-y-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 opacity-75 dark:bg-sky-400/85 dark:text-white">
+              3
+            </div>
+            <div className="absolute inset-0 -translate-x-12 -rotate-y-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 dark:bg-sky-400/85 dark:text-white">
+              4
+            </div>
+            <div className="absolute inset-0 -translate-y-12 rotate-x-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 opacity-75 dark:bg-sky-400/85 dark:text-white">
+              5
+            </div>
+            <div className="absolute inset-0 translate-y-12 -rotate-x-90 bg-sky-300/75 text-center text-4xl leading-20 font-bold text-sky-900 dark:bg-sky-400/85 dark:text-white">
+              6
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:transform-flat,transform-3d] -->
+<div class="size-20 transform-flat ...">
+  <div class="translate-z-12 rotate-x-0 bg-sky-300/75 ...">1</div>
+  <div class="-translate-z-12 rotate-y-18 bg-sky-300/75 ...">2</div>
+  <div class="translate-x-12 rotate-y-90 bg-sky-300/75 ...">3</div>
+  <div class="-translate-x-12 -rotate-y-90 bg-sky-300/75 ...">4</div>
+  <div class="-translate-y-12 rotate-x-90 bg-sky-300/75 ...">5</div>
+  <div class="translate-y-12 -rotate-x-90 bg-sky-300/75 ...">6</div>
+</div>
+
+<div class="size-20 transform-3d ...">
+  <div class="translate-z-12 rotate-x-0 bg-sky-300/75 ...">1</div>
+  <div class="-translate-z-12 rotate-y-18 bg-sky-300/75 ...">2</div>
+  <div class="translate-x-12 rotate-y-90 bg-sky-300/75 ...">3</div>
+  <div class="-translate-x-12 -rotate-y-90 bg-sky-300/75 ...">4</div>
+  <div class="-translate-y-12 rotate-x-90 bg-sky-300/75 ...">5</div>
+  <div class="translate-y-12 -rotate-x-90 bg-sky-300/75 ...">6</div>
+</div>
+```
+
+</Figure>
+
+Without this, any children will only be transformed in 2D space and not in 3D space.
+
+### Responsive design
+
+<ResponsiveDesign property="transform-style" defaultClass="transform-3d" featuredClass="transform-flat" />