diff --git a/apps/builder/app/builder/features/style-panel/sections/transforms/transform-perspective.tsx b/apps/builder/app/builder/features/style-panel/sections/transforms/transform-perspective.tsx
new file mode 100644
index 0000000000..6d01a3f94c
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/apps/builder/app/builder/features/style-panel/sections/transforms/transform-utils.ts b/apps/builder/app/builder/features/style-panel/sections/transforms/transform-utils.ts
index c0a25cf106..01e44068e1 100644
--- a/apps/builder/app/builder/features/style-panel/sections/transforms/transform-utils.ts
+++ b/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 (
diff --git a/apps/builder/app/builder/features/style-panel/sections/transforms/transforms.tsx b/apps/builder/app/builder/features/style-panel/sections/transforms/transforms.tsx
index 0ab9ce4b59..17798d4912 100644
--- a/apps/builder/app/builder/features/style-panel/sections/transforms/transforms.tsx
+++ b/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>
   );
 };