experimental: add backface-visibility property for transforms

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

@@ -0,0 +1,65 @@
+import { toValue, type StyleProperty } from "@webstudio-is/css-engine";
+import {
+  CssValueListItem,
+  Grid,
+  Label,
+  Select,
+  SmallIconButton,
+  theme,
+} from "@webstudio-is/design-system";
+import { humanizeString } from "~/shared/string-utils";
+import type { SectionProps } from "../shared/section";
+import { FloatingPanel } from "~/builder/shared/floating-panel";
+import { transformPanels } from "./transforms";
+import { SubtractIcon } from "@webstudio-is/icons";
+
+const property: StyleProperty = "backfaceVisibility";
+
+export const BackfaceVisibility = (props: SectionProps) => {
+  const { currentStyle, setProperty, deleteProperty } = props;
+  const value = currentStyle[property]?.local;
+  if (value?.type !== "keyword") {
+    return;
+  }
+
+  return (
+    <FloatingPanel
+      title={humanizeString(property)}
+      content={
+        <Grid
+          gap="4"
+          align="center"
+          css={{ p: theme.spacing[9], gridTemplateColumns: "1.5fr 1fr" }}
+        >
+          <Label>Backface Visibility</Label>
+          <Select
+            options={["visible", "hidden"]}
+            value={toValue(value)}
+            getLabel={humanizeString}
+            onChange={(value) => {
+              setProperty(property)({ type: "keyword", value });
+            }}
+          />
+        </Grid>
+      }
+    >
+      <CssValueListItem
+        id={property}
+        index={transformPanels.length + 1}
+        label={
+          <Label truncate>
+            {humanizeString(property)}: {toValue(value)}
+          </Label>
+        }
+        buttons={
+          <SmallIconButton
+            variant="destructive"
+            tabIndex={-1}
+            icon={<SubtractIcon />}
+            onClick={() => deleteProperty(property)}
+          />
+        }
+      ></CssValueListItem>
+    </FloatingPanel>
+  );
+};

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

@@ -97,6 +97,13 @@ export const addDefaultsForTransormSection = (props: {
       return setProperty("scale")(scale);
     }
 
+    case "backfaceVisibility": {
+      return setProperty("backfaceVisibility")({
+        type: "keyword",
+        value: "visible",
+      });
+    }
+
     case "skew":
     case "rotate": {
       const value = currentStyle["transform"]?.value;
@@ -134,6 +141,14 @@ export const isTransformPanelPropertyUsed = (params: {
     case "translate":
       return currentStyle[panel]?.value.type === "tuple";
 
+    /*
+      backface-visibility takes only two values, either `hidden` / `visible`
+      And it's not inherited. So, we need to check with the local value.
+      If we check with the computed value, it will always return true.
+    */
+    case "backfaceVisibility":
+      return currentStyle["backfaceVisibility"]?.local?.type === "keyword";
+
     case "rotate": {
       const rotate = currentStyle["transform"]?.value;
       return (

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

@@ -38,6 +38,7 @@ import { TranslatePanelContent } from "./transform-translate";
 import { ScalePanelContent } from "./transform-scale";
 import { RotatePanelContent } from "./transform-rotate";
 import { SkewPanelContent } from "./transform-skew";
+import { BackfaceVisibility } from "./transform-backface-visibility";
 import { humanizeString } from "~/shared/string-utils";
 import { getStyleSource } from "../../shared/style-info";
 import { PropertyName } from "../../shared/property-name";
@@ -48,6 +49,7 @@ export const transformPanels = [
   "scale",
   "rotate",
   "skew",
+  "backfaceVisibility",
 ] as const;
 
 export type TransformPanel = (typeof transformPanels)[number];
@@ -57,6 +59,7 @@ export const properties = [
   "translate",
   "scale",
   "transform",
+  "backfaceVisibility",
 ] satisfies Array<StyleProperty>;
 
 export const Section = (props: SectionProps) => {
@@ -65,6 +68,9 @@ export const Section = (props: SectionProps) => {
   const translateStyleSource = getStyleSource(currentStyle["translate"]);
   const scaleStyleSource = getStyleSource(currentStyle["scale"]);
   const rotateAndSkewStyleSrouce = getStyleSource(currentStyle["transform"]);
+  const backfaceVisibilityStyleSource = getStyleSource(
+    currentStyle["backfaceVisibility"]
+  );
 
   const isAnyTransformPropertyAdded = transformPanels.some((panel) =>
     isTransformPanelPropertyUsed({
@@ -78,6 +84,7 @@ export const Section = (props: SectionProps) => {
     batch.deleteProperty("translate");
     batch.deleteProperty("scale");
     batch.deleteProperty("transform");
+    batch.deleteProperty("backfaceVisibility");
     batch.publish();
   };
 
@@ -137,7 +144,8 @@ export const Section = (props: SectionProps) => {
                 color={
                   translateStyleSource ||
                   scaleStyleSource ||
-                  rotateAndSkewStyleSrouce
+                  rotateAndSkewStyleSrouce ||
+                  backfaceVisibilityStyleSource
                 }
               >
                 {label}
@@ -150,14 +158,22 @@ export const Section = (props: SectionProps) => {
     >
       {isAnyTransformPropertyAdded === true ? (
         <CssValueListArrowFocus>
-          {transformPanels.map((panel, index) => (
-            <TransformSection
-              {...props}
-              key={panel}
-              index={index}
-              panel={panel}
-            />
-          ))}
+          <Flex direction="column">
+            {transformPanels.map((panel, index) => {
+              if (panel === "backfaceVisibility") {
+                return <BackfaceVisibility key={panel} {...props} />;
+              }
+
+              return (
+                <TransformSection
+                  {...props}
+                  key={panel}
+                  index={index}
+                  panel={panel}
+                />
+              );
+            })}
+          </Flex>
         </CssValueListArrowFocus>
       ) : undefined}
     </CollapsibleSectionRoot>
@@ -172,6 +188,7 @@ const TransformSection = (
     const property =
       panel === "rotate" || panel === "skew" ? "transform" : panel;
     const value = currentStyle[property]?.value;
+
     if (value === undefined || value.type !== "tuple") {
       return;
     }