experimental: add ui controls for perspective under transform controls (#3945)

## Description

This PR adds support for `perspective` property to be managed under the
transforms panel. This behaves very similar to `backface-visibility`
property that is under transforms.

## Steps for reproduction

- Add the `perspective` property under the transforms using the
dropdown.
- You can add `none` or any of the `length` values for the property.
- Able to reset the property and update using the `keyboard`, `scrub`
and `up and down` interactions.

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [x] made a self-review

## Before merging

- [x] tested locally and on preview environment (preview dev login:
5de6)



![perspective](https://github.com/user-attachments/assets/98cf4753-7d5e-48ee-b654-470f0fdac5ff)

apps/builder/app/builder/features/style-panel/sections/transforms/transform-perspective.tsx

@@ -0,0 +1,40 @@
+import { type StyleProperty } from "@webstudio-is/css-engine";
+import { Grid, theme } from "@webstudio-is/design-system";
+import { TextControl } from "../../controls";
+import { PropertyName } from "../../shared/property-name";
+import { styleConfigByName } from "../../shared/configs";
+import type { SectionProps } from "../shared/section";
+
+const property: StyleProperty = "perspective";
+
+export const TransformPerspective = (props: SectionProps) => {
+  const { currentStyle, setProperty, deleteProperty } = props;
+  const { label } = styleConfigByName(property);
+  const value = currentStyle[property]?.local;
+
+  if (value?.type !== "keyword" && value?.type !== "unit") {
+    return;
+  }
+
+  return (
+    <Grid
+      css={{
+        px: theme.spacing[9],
+        gridTemplateColumns: `2fr 1fr`,
+      }}
+    >
+      <PropertyName
+        label={label}
+        properties={[property]}
+        style={currentStyle}
+        onReset={() => deleteProperty(property)}
+      />
+      <TextControl
+        property={property}
+        currentStyle={currentStyle}
+        setProperty={setProperty}
+        deleteProperty={deleteProperty}
+      />
+    </Grid>
+  );
+};

apps/builder/app/builder/features/style-panel/sections/transforms/transform-utils.ts

@@ -108,6 +108,13 @@ export const addDefaultsForTransormSection = (props: {
       });
     }
 
+    case "perspective": {
+      return setProperty("perspective")({
+        type: "keyword",
+        value: "none",
+      });
+    }
+
     case "skew":
     case "rotate": {
       const value = currentStyle["transform"]?.value;
@@ -154,6 +161,9 @@ export const isTransformPanelPropertyUsed = (params: {
     case "backfaceVisibility":
       return currentStyle["backfaceVisibility"]?.local?.type === "keyword";
 
+    case "perspective":
+      return currentStyle["perspective"]?.local !== undefined;
+
     case "rotate": {
       const rotate = currentStyle["transform"]?.value;
       return (

apps/builder/app/builder/features/style-panel/sections/transforms/transforms.tsx

@@ -39,6 +39,7 @@ import { ScalePanelContent } from "./transform-scale";
 import { RotatePanelContent } from "./transform-rotate";
 import { SkewPanelContent } from "./transform-skew";
 import { BackfaceVisibility } from "./transform-backface-visibility";
+import { TransformPerspective } from "./transform-perspective";
 import { humanizeString } from "~/shared/string-utils";
 import { getStyleSource } from "../../shared/style-info";
 import { PropertyName } from "../../shared/property-name";
@@ -55,6 +56,7 @@ export const transformPanels = [
 export const transformPanelDropdown = [
   ...transformPanels,
   "backfaceVisibility",
+  "perspective",
 ] as const;
 
 export type TransformPanel = (typeof transformPanels)[number];
@@ -65,6 +67,7 @@ export const properties = [
   "scale",
   "transform",
   "backfaceVisibility",
+  "perspective",
 ] satisfies Array<StyleProperty>;
 
 export const Section = (props: SectionProps) => {
@@ -81,6 +84,7 @@ export const Section = (props: SectionProps) => {
   const backfaceVisibilityStyleSource = getStyleSource(
     currentStyle["backfaceVisibility"]
   );
+  const perspectiveStyleSource = getStyleSource(currentStyle["perspective"]);
 
   const isAnyTransformPropertyAdded = transformPanels.some((panel) =>
     isTransformPanelPropertyUsed({
@@ -95,6 +99,7 @@ export const Section = (props: SectionProps) => {
     batch.deleteProperty("scale");
     batch.deleteProperty("transform");
     batch.deleteProperty("backfaceVisibility");
+    batch.deleteProperty("perspective");
     batch.publish();
   };
 
@@ -115,7 +120,7 @@ export const Section = (props: SectionProps) => {
               <DropdownMenuPortal>
                 <DropdownMenuContent
                   collisionPadding={16}
-                  css={{ width: theme.spacing[20] }}
+                  css={{ width: theme.spacing[24] }}
                 >
                   {transformPanelDropdown.map((panel) => {
                     return (
@@ -155,7 +160,8 @@ export const Section = (props: SectionProps) => {
                   translateStyleSource ||
                   scaleStyleSource ||
                   rotateAndSkewStyleSrouce ||
-                  backfaceVisibilityStyleSource
+                  backfaceVisibilityStyleSource ||
+                  perspectiveStyleSource
                 }
               >
                 {label}
@@ -182,6 +188,7 @@ export const Section = (props: SectionProps) => {
       ) : undefined}
 
       <BackfaceVisibility {...props} />
+      <TransformPerspective {...props} />
     </CollapsibleSectionRoot>
   );
 };