diff --git a/client/packages/lowcoder/src/comps/comps/avatar.tsx b/client/packages/lowcoder/src/comps/comps/avatar.tsx
index 61779a1c7..d97e3fed9 100644
--- a/client/packages/lowcoder/src/comps/comps/avatar.tsx
+++ b/client/packages/lowcoder/src/comps/comps/avatar.tsx
@@ -74,7 +74,6 @@ white-space: nowrap;
 font-weight: ${props=>props.$style.textWeight};
 border-radius: ${props=>props.$style.radius};
 font-size: ${props=>props.$style.textSize};
-rotate: ${props=>props.$style.rotation};
 text-transform: ${props=>props.$style.textTransform};
 color: ${props=>props.$style.text};
 border: ${props => props.$style.border};
@@ -95,7 +94,6 @@ white-space: nowrap;
 font-weight: ${props=>props.$style.textWeight};
 border-radius: ${props=>props.$style.radius};
 font-size: ${props=>props.$style.textSize};
-rotate: ${props=>props.$style.rotation};
 text-transform: ${props=>props.$style.textTransform};
 color: ${props=>props.$style.text};
 border: ${props => props.$style.border};
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx
index 6e02a5ea3..1511ec66d 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonComp.tsx
@@ -25,6 +25,7 @@ import {
 import { RefControl } from "comps/controls/refControl";
 
 import React, { useContext } from "react";
+import { AnimationStyle, styleControl } from "@lowcoder-ee/index.sdk";
 
 const FormLabel = styled(CommonBlueLabel)`
   font-size: 13px;
@@ -129,6 +130,7 @@ const ButtonTmpComp = (function () {
     prefixIcon: IconControl,
     suffixIcon: IconControl,
     style: ButtonStyleControl,
+    animationStyle:styleControl(AnimationStyle),
     viewRef: RefControl<HTMLElement>,
   };
   return new UICompBuilder(childrenMap, (props) => (
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx
index 8ebcd250c..5fb44f730 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/buttonCompConstants.tsx
@@ -7,15 +7,16 @@ import { genActiveColor, genHoverColor } from "lowcoder-design";
 import { refMethods } from "comps/generators/withMethodExposing";
 import { blurMethod, clickMethod, focusWithOptions } from "comps/utils/methodUtils";
 
-export function getButtonStyle(buttonStyle: ButtonStyleType) {
+export function getButtonStyle(buttonStyle: any) {
   const hoverColor = genHoverColor(buttonStyle.background);
   const activeColor = genActiveColor(buttonStyle.background);
   return css`
     &&& {
       border-radius: ${buttonStyle.radius};
       border-width:${buttonStyle.borderWidth};
-      margin: ${buttonStyle.margin};	
+      margin: ${buttonStyle.margin};
       padding: ${buttonStyle.padding};
+      rotate: ${buttonStyle.rotation&&buttonStyle.rotation};
       &:not(:disabled) {
         --antd-wave-shadow-color: ${buttonStyle.border};
         border-color: ${buttonStyle.border};
@@ -28,9 +29,9 @@ export function getButtonStyle(buttonStyle: ButtonStyleType) {
         text-decoration:${buttonStyle.textDecoration};
         background-color: ${buttonStyle.background};
         border-radius: ${buttonStyle.radius};
-        margin: ${buttonStyle.margin};	
+        margin: ${buttonStyle.margin};
         padding: ${buttonStyle.padding};
-  
+
         &:hover,
         &:focus {
           color: ${buttonStyle.text};
@@ -51,7 +52,7 @@ export function getButtonStyle(buttonStyle: ButtonStyleType) {
   `;
 }
 
-export const Button100 = styled(Button)<{ $buttonStyle?: ButtonStyleType }>`
+export const Button100 = styled(Button)<{ $buttonStyle?: any }>`
   ${(props) => props.$buttonStyle && getButtonStyle(props.$buttonStyle)}
   width: 100%;
   height: auto;
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx
index 3a00a887d..24dc12ce9 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/dropdownComp.tsx
@@ -3,7 +3,7 @@ import { default as Dropdown } from "antd/es/dropdown";
 import { default as DropdownButton } from "antd/es/dropdown/dropdown-button";
 import { BoolControl } from "comps/controls/boolControl";
 import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
-import { ButtonStyleType } from "comps/controls/styleControlConstants";
+import { DropdownStyle } from "comps/controls/styleControlConstants";
 import { withDefault } from "comps/generators";
 import { UICompBuilder } from "comps/generators/uiCompBuilder";
 import { disabledPropertyView, hiddenPropertyView } from "comps/utils/propertyUtils";
@@ -21,6 +21,7 @@ import {
   ButtonStyleControl,
   getButtonStyle,
 } from "./buttonCompConstants";
+import { styleControl } from "@lowcoder-ee/index.sdk";
 
 
 const StyledDropdownButton = styled(DropdownButton)`
@@ -32,7 +33,7 @@ const StyledDropdownButton = styled(DropdownButton)`
   }
 `;
 
-const LeftButtonWrapper = styled.div<{ $buttonStyle: ButtonStyleType }>`
+const LeftButtonWrapper = styled.div<{ $buttonStyle: any }>`
   width: calc(100%);
   ${(props) => `margin: ${props.$buttonStyle.margin};`}
   margin-right: 0;
@@ -62,7 +63,7 @@ const LeftButtonWrapper = styled.div<{ $buttonStyle: ButtonStyleType }>`
   
 `;
 
-const RightButtonWrapper = styled.div<{ $buttonStyle: ButtonStyleType }>`
+const RightButtonWrapper = styled.div<{ $buttonStyle: any }>`
   // width: 32px;
   ${(props) => `margin: ${props.$buttonStyle.margin};`}
   margin-left: -1px;
@@ -85,7 +86,7 @@ const DropdownTmpComp = (function () {
     options: DropdownOptionControl,
     disabled: BoolCodeControl,
     onEvent: ButtonEventHandlerControl,
-    style: ButtonStyleControl,
+    style: styleControl(DropdownStyle),
   };
   return new UICompBuilder(childrenMap, (props) => {
     const hasIcon =
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/floatButtonComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/floatButtonComp.tsx
index 01ec6226d..f2ce2bcc2 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/floatButtonComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/floatButtonComp.tsx
@@ -3,7 +3,7 @@ import { BoolControl } from "comps/controls/boolControl";
 import { stringExposingStateControl } from "comps/controls/codeStateControl";
 import { dropdownControl } from "comps/controls/dropdownControl";
 import { styleControl } from "comps/controls/styleControl";
-import { BadgeStyle, BadgeStyleType, FloatButtonStyle, FloatButtonStyleType } from "comps/controls/styleControlConstants";
+import { AnimationStyle, AnimationStyleType, BadgeStyle, BadgeStyleType, FloatButtonStyle, FloatButtonStyleType } from "comps/controls/styleControlConstants";
 import { UICompBuilder } from "comps/generators/uiCompBuilder";
 import { NameConfig, NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing";
 import { Section, sectionNames } from "lowcoder-design";
@@ -17,6 +17,12 @@ import styled from "styled-components";
 import { ButtonEventHandlerControl } from "comps/controls/eventHandlerControl";
 import { manualOptionsControl } from "comps/controls/optionsControl";
 
+const StyledFloatButton = styled(FloatButton)<{
+  $animationStyle: AnimationStyleType;
+}>`
+  ${(props) => props.$animationStyle}
+`;
+
 const Wrapper = styled.div<{ $badgeStyle: BadgeStyleType, $style: FloatButtonStyleType}>`
     width: 0px;
     height: 0px;
@@ -78,6 +84,7 @@ const childrenMap = {
     icon: withDefault(IconControl, '/icon:antd/questioncircleoutlined'),
     badgeStyle: styleControl(BadgeStyle),
     style: styleControl(FloatButtonStyle),
+    animationStyle: styleControl(AnimationStyle),
     buttons: manualOptionsControl(buttonGroupOption, {
         initOptions: [
             { id: 0, label: trans("optionsControl.optionI", { i: '1' }), icon: "/icon:antd/filetextoutlined", badge: '1' },
@@ -93,7 +100,8 @@ const childrenMap = {
 const FloatButtonView = (props: RecordConstructorToView<typeof childrenMap>) => {
     const renderButton = (button: any, onlyOne?: boolean) => {
         return !button?.hidden ? (
-            <FloatButton
+            <StyledFloatButton
+                $animationStyle={props.animationStyle}
                 key={button?.id}
                 icon={button?.icon}
                 onClick={() => button.onEvent("click")}
@@ -108,7 +116,7 @@ const FloatButtonView = (props: RecordConstructorToView<typeof childrenMap>) =>
     return (
         <Wrapper $badgeStyle={props.badgeStyle} $style={props.style}>
             {props.buttons.length === 1 ? (renderButton(props.buttons[0], true)) :
-                (<FloatButton.Group
+                (<StyledFloatButton.Group
                     trigger="hover"
                     icon={props.icon}
                     shape={props.shape}
@@ -116,31 +124,38 @@ const FloatButtonView = (props: RecordConstructorToView<typeof childrenMap>) =>
                     type={props.buttonTheme}
                 >
                     {props.buttons.map((button: any) => renderButton(button))}
-                </FloatButton.Group>)
+                </StyledFloatButton.Group>)
             }
         </Wrapper>
     );
 };
 
 let FloatButtonBasicComp = (function () {
-    return new UICompBuilder(childrenMap, (props) => <FloatButtonView {...props} />)
-        .setPropertyViewFn((children) => (
-            <>
-                <Section name={sectionNames.basic}>
-                    {children.buttons.propertyView({})}
-                    {children.icon.propertyView({ label: trans("icon") })}
-                    {children.shape.propertyView({ label: trans("floatButton.buttonShape"), radioButton: true })}
-                    {children.buttonTheme.propertyView({ label: trans("floatButton.buttonTheme"), radioButton: true })}
-                    {children.dot.propertyView({ label: trans("floatButton.dot") })}
-                </Section>
-                <Section name={sectionNames.layout}>
-                    {hiddenPropertyView(children)}
-                </Section>
-                <Section name={sectionNames.badgeStyle}>{children.badgeStyle.getPropertyView()}</Section>
-                <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
-            </>
-        ))
-        .build();
+    return new UICompBuilder(childrenMap, (props) => (
+      <FloatButtonView {...props} />
+    ))
+      .setPropertyViewFn((children) => (
+        <>
+          <Section name={sectionNames.basic}>
+            {children.buttons.propertyView({})}
+            {children.icon.propertyView({ label: trans("icon") })}
+            {children.shape.propertyView({ label: trans("floatButton.buttonShape"), radioButton: true })}
+            {children.buttonTheme.propertyView({ label: trans("floatButton.buttonTheme"), radioButton: true })}
+            {children.dot.propertyView({ label: trans("floatButton.dot") })}
+          </Section>
+          <Section name={sectionNames.layout}>
+            {hiddenPropertyView(children)}
+          </Section>
+          <Section name={sectionNames.badgeStyle}>{children.badgeStyle.getPropertyView()}</Section>
+          <Section name={sectionNames.style}>
+            {children.style.getPropertyView()}
+          </Section>
+          <Section name={sectionNames.animationStyle}>
+            {children.animationStyle.getPropertyView()}
+          </Section>
+        </>
+      ))
+      .build();
 })();
 
 FloatButtonBasicComp = class extends FloatButtonBasicComp {
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx
index f4e1d2933..6a870a79e 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/linkComp.tsx
@@ -30,6 +30,7 @@ const Link = styled(Button)<{
   ${(props) => props.$animationStyle}
   ${(props) => `
     color: ${props.$style.text};
+    rotate: ${props.$style.rotation};
     margin: ${props.$style.margin};
     padding: ${props.$style.padding};
     font-size: ${props.$style.textSize};
diff --git a/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx b/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx
index ddd6364c3..4f497fb68 100644
--- a/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/buttonComp/scannerComp.tsx
@@ -10,7 +10,7 @@ import {
 import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
 import { ScannerEventHandlerControl } from "comps/controls/eventHandlerControl";
 import { styleControl } from "comps/controls/styleControl";
-import { ButtonStyle } from "comps/controls/styleControlConstants";
+import { DropdownStyle } from "comps/controls/styleControlConstants";
 import { withDefault } from "comps/generators";
 import { UICompBuilder } from "comps/generators/uiCompBuilder";
 import { CustomModal, Section, sectionNames } from "lowcoder-design";
@@ -70,7 +70,7 @@ const ScannerTmpComp = (function () {
     maskClosable: withDefault(BoolControl, true),
     onEvent: ScannerEventHandlerControl,
     disabled: BoolCodeControl,
-    style: styleControl(ButtonStyle),
+    style: styleControl(DropdownStyle),
     viewRef: RefControl<HTMLElement>,
   };
   return new UICompBuilder(childrenMap, (props) => {
diff --git a/client/packages/lowcoder/src/comps/comps/carouselComp.tsx b/client/packages/lowcoder/src/comps/comps/carouselComp.tsx
index 8e9c776d4..4a0d014fc 100644
--- a/client/packages/lowcoder/src/comps/comps/carouselComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/carouselComp.tsx
@@ -13,7 +13,7 @@ import { useRef, useState } from "react";
 import ReactResizeDetector from "react-resize-detector";
 import { ArrayStringControl } from "comps/controls/codeControl";
 import { styleControl } from "comps/controls/styleControl";
-import { CarouselStyle } from "comps/controls/styleControlConstants";
+import { AnimationStyle, AnimationStyleType, CarouselStyle } from "comps/controls/styleControlConstants";
 
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
@@ -25,11 +25,13 @@ const CarouselItem = styled.div<{ $src: string }>`
   background-size: contain;
 `;
 
-const Container = styled.div<{ $bg: string }>`
+const Container = styled.div<{$bg: string; $rotation: string; $animationStyle:AnimationStyleType}>`
   &,
   .ant-carousel {
     height: 100%;
     background-color: ${(props) => props.$bg};
+    rotate: ${(props) => props.$rotation};
+    ${props=>props.$animationStyle}
   }
 `;
 
@@ -44,6 +46,7 @@ let CarouselBasicComp = (function () {
     showDots: withDefault(BoolControl, true),
     dotPosition: withDefault(PositionControl, "bottom"),
     style: styleControl(CarouselStyle),
+    animationStyle: styleControl(AnimationStyle),
 
     ...formDataChildren,
   };
@@ -56,7 +59,12 @@ let CarouselBasicComp = (function () {
       }
     };
     return (
-      <Container ref={containerRef} $bg={props.style.background}>
+      <Container
+        ref={containerRef}
+        $bg={props.style.background}
+        $rotation={props.style.rotation}
+        $animationStyle={props.animationStyle}
+      >
         <ReactResizeDetector onResize={onResize}>
           <Carousel
             dots={props.showDots}
@@ -100,6 +108,9 @@ let CarouselBasicComp = (function () {
               <Section name={sectionNames.style}>
                 {children.style.getPropertyView()}
               </Section>
+              <Section name={sectionNames.animationStyle}>
+                {children.animationStyle.getPropertyView()}
+              </Section>
             </>
           )}
         </>
diff --git a/client/packages/lowcoder/src/comps/comps/columnLayout/columnLayout.tsx b/client/packages/lowcoder/src/comps/comps/columnLayout/columnLayout.tsx
index 299ae8390..7aaff303e 100644
--- a/client/packages/lowcoder/src/comps/comps/columnLayout/columnLayout.tsx
+++ b/client/packages/lowcoder/src/comps/comps/columnLayout/columnLayout.tsx
@@ -49,7 +49,6 @@ const ContainWrapper = styled.div<{
   border-width: ${(props) => props.$style?.borderWidth};
   border-color: ${(props) => props.$style?.border};
   border-style: ${(props) => props.$style?.borderStyle};
-  rotate: ${(props) => props.$style?.rotation};
   margin: ${(props) => props.$style?.margin};
   padding: ${(props) => props.$style?.padding};
 `;
diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx
index 12c84c7c6..2f927cfda 100644
--- a/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/containerComp/cardComp.tsx
@@ -74,6 +74,7 @@ const Wrapper = styled.div<{
     justify-content: space-between;
     background-color: ${props => props.$style?.background};
     border: ${props => props.$style?.border};
+    rotate: ${props => props.$style?.rotation};
     border-style: ${props => props.$style?.borderStyle};
     border-radius: ${props => props.$style?.radius};
     border-width: ${props => props.$style?.borderWidth};
diff --git a/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx b/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx
index 07d72b701..0b7a3b5e3 100644
--- a/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/customComp/customComp.tsx
@@ -12,6 +12,7 @@ import { EventData, EventTypeEnum } from "./types";
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { EditorContext } from "comps/editorState";
+import { AnimationStyle, AnimationStyleType, CustomStyle, CustomStyleType, styleControl } from "@lowcoder-ee/index.sdk";
 
 // TODO: eventually to embedd in container so we have styling?
 // TODO: support different starter templates for different frameworks (react, ANT, Flutter, Angular, etc)
@@ -67,13 +68,21 @@ const defaultCode = `
 type IProps = {
   code: string;
   model: any;
+  style: CustomStyleType;
+  animationStyle:AnimationStyleType
   onModelChange: (v: any) => void;
   dispatch: (action: CompAction<any>) => void;
 };
 
-const Wrapper = styled.div`
+const Wrapper = styled.div<{
+  $style: CustomStyleType;
+  $animationStyle: AnimationStyleType;
+}>`
   width: 100%;
   height: 100%;
+  ${(props) => props.$style};
+  rotate: ${(props) => props.$style.rotation};
+  ${(props) => props.$animationStyle};
   iframe {
     border: 0;
     width: 100%;
@@ -196,8 +205,12 @@ function InnerCustomComponent(props: IProps) {
   }, [code]);
 
   return (
-    <Wrapper>
-      <iframe ref={iframeRef} title="custom-comp" src={trans("customComponent.entryUrl")} />
+    <Wrapper $style={props.style} $animationStyle={props.animationStyle}>
+      <iframe
+        ref={iframeRef}
+        title="custom-comp"
+        src={trans('customComponent.entryUrl')}
+      />
     </Wrapper>
   );
 }
@@ -205,12 +218,16 @@ function InnerCustomComponent(props: IProps) {
 const childrenMap = {
   model: jsonObjectStateControl(defaultModel),
   code: withDefault(StringControl, defaultCode),
+  style:styleControl(CustomStyle),
+  animationStyle:styleControl(AnimationStyle),
 };
 
 const CustomCompBase = new UICompBuilder(childrenMap, (props, dispatch) => {
   const { code, model } = props;
   return (
     <InnerCustomComponent
+      style={props.style}
+      animationStyle={props.animationStyle}
       code={code}
       model={model.value}
       onModelChange={(v) => model.onChange(v)}
@@ -226,6 +243,12 @@ const CustomCompBase = new UICompBuilder(childrenMap, (props, dispatch) => {
               {children.model.propertyView({ label: trans("customComp.data") })}
               {children.code.propertyView({ label: trans("customComp.code"), language: "html" })}
               {hiddenPropertyView(children)}
+          </Section>
+            <Section name={sectionNames.style}>
+              {children.style.getPropertyView()}
+            </Section>
+            <Section name={sectionNames.animationStyle}>
+              {children.animationStyle.getPropertyView()}
             </Section>
           </>
         )}  
diff --git a/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx b/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx
index 48928e2f1..91ac35e88 100644
--- a/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/fileComp/fileComp.tsx
@@ -6,7 +6,7 @@ import { darkenColor } from "components/colorSelect/colorUtils";
 import { Section, sectionNames } from "components/Section";
 import { IconControl } from "comps/controls/iconControl";
 import { styleControl } from "comps/controls/styleControl";
-import { FileStyle, FileStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
+import { AnimationStyle, AnimationStyleType, FileStyle, FileStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
 import { withMethodExposing } from "comps/generators/withMethodExposing";
 import { hasIcon } from "comps/utils";
 import { getComponentDocUrl } from "comps/utils/compDocUtil";
@@ -101,6 +101,7 @@ const commonChildren = {
   disabled: BoolCodeControl,
   onEvent: eventHandlerControl(EventOptions),
   style: styleControl(FileStyle),
+  animationStyle: styleControl(AnimationStyle),
   parseFiles: BoolPureControl,
   parsedValue: stateComp<Array<JSONValue | null>>([]),
   prefixIcon: withDefault(IconControl, "/icon:solid/arrow-up-from-bracket"),
@@ -137,6 +138,7 @@ const getStyle = (style: FileStyleType) => {
   return css`
     .ant-btn {
       border-radius: ${style.radius};
+      rotate: ${style.rotation};
       margin: ${style.margin};	
       padding: ${style.padding};	
       width: ${widthCalculator(style.margin)};	
@@ -167,9 +169,13 @@ const getStyle = (style: FileStyleType) => {
   `;
 };
 
-const StyledUpload = styled(AntdUpload)<{ $style: FileStyleType }>`
+const StyledUpload = styled(AntdUpload)<{
+  $style: FileStyleType;
+  $animationStyle: AnimationStyleType;
+}>`
   .ant-upload,
   .ant-btn {
+    ${(props) => props.$animationStyle}
     width: 100%;
     display: inline-flex;
     justify-content: center;
@@ -185,7 +191,6 @@ const StyledUpload = styled(AntdUpload)<{ $style: FileStyleType }>`
       min-height: 1px;
     }
   }
-
   ${(props) => props.$style && getStyle(props.$style)}
 `;
 
@@ -252,6 +257,7 @@ const Upload = (
   const hasChildren = hasIcon(props.prefixIcon) || !!props.text || hasIcon(props.suffixIcon);
   return (
     <StyledUpload
+    $animationStyle={props.animationStyle}
       {...commonProps(props)}
       $style={style}
       fileList={fileList}
@@ -419,7 +425,10 @@ let FileTmpComp = new UICompBuilder(childrenMap, (props, dispatch) => (
       )}
 
       {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
-        <><Section name={sectionNames.style}>{children.style.getPropertyView()}</Section></>
+        <>
+          <Section name={sectionNames.style}>{children.style.getPropertyView()}</Section>
+          <Section name={sectionNames.animationStyle}>{children.animationStyle.getPropertyView()}</Section>
+        </>
       )}
     </>
   ))
diff --git a/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx b/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx
index 4d6de9bd1..8abdd3a38 100644
--- a/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx
@@ -1,5 +1,5 @@
 import { styleControl } from "comps/controls/styleControl";
-import { FileViewerStyle, FileViewerStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
+import { AnimationStyle, AnimationStyleType, FileViewerStyle, FileViewerStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
 import { isEmpty } from "lodash";
 import { useState } from "react";
 import { DocumentViewer } from "react-documents";
@@ -20,6 +20,7 @@ const getStyle = (style: FileViewerStyleType) => {
     height: ${heightCalculator(style.margin)};	
     margin: ${style.margin};	
     padding: ${style.padding};
+    rotate: ${style.rotation};
 
     overflow: hidden;
     background-color: ${style.background};
@@ -28,20 +29,21 @@ const getStyle = (style: FileViewerStyleType) => {
   `;
 };
 
-const ErrorWrapper = styled.div<{ $style: FileViewerStyleType }>`
+const ErrorWrapper = styled.div<{$style: FileViewerStyleType, $animationStyle:AnimationStyleType}>`
   display: flex;
   height: 100%;
   justify-content: center;
   align-items: center;
   ${(props) => props.$style && getStyle(props.$style)}
+  ${(props) => props.$animationStyle}
 `;
 
-const StyledDiv = styled.div<{ $style: FileViewerStyleType }>`
+const StyledDiv = styled.div<{$style: FileViewerStyleType;}>`
   height: 100%;
   ${(props) => props.$style && getStyle(props.$style)}
 `;
 
-const DraggableFileViewer = (props: { src: string; style: FileViewerStyleType }) => {
+const DraggableFileViewer = (props: { src: string; style: FileViewerStyleType,animationStyle:AnimationStyleType }) => {
   const [isActive, setActive] = useState(false);
 
   return (
@@ -67,12 +69,20 @@ let FileViewerBasicComp = (function () {
   const childrenMap = {
     src: StringControl,
     style: styleControl(FileViewerStyle),
+    animationStyle:styleControl(AnimationStyle)
   };
   return new UICompBuilder(childrenMap, (props) => {
     if (isEmpty(props.src)) {
-      return <ErrorWrapper $style={props.style}>{trans("fileViewer.invalidURL")}</ErrorWrapper>;
+      return (
+        <ErrorWrapper
+          $style={props.style}
+          $animationStyle={props.animationStyle}
+        >
+          {trans('fileViewer.invalidURL')}
+        </ErrorWrapper>
+      );
     }
-    return <DraggableFileViewer src={props.src} style={props.style} />;
+    return <DraggableFileViewer src={props.src} style={props.style} animationStyle={props.animationStyle}/>;
   })
     .setPropertyViewFn((children) => {
       return (
@@ -93,9 +103,14 @@ let FileViewerBasicComp = (function () {
           )}
 
           {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
-            <Section name={sectionNames.style}>
+            <>
+              <Section name={sectionNames.style}>
               {children.style.getPropertyView()}
-            </Section>
+              </Section>
+              <Section name={sectionNames.animationStyle}>
+              {children.animationStyle.getPropertyView()}
+              </Section>
+              </>
           )}
         </>
       );
diff --git a/client/packages/lowcoder/src/comps/comps/iconComp.tsx b/client/packages/lowcoder/src/comps/comps/iconComp.tsx
index f1700f489..1b3ab8fb8 100644
--- a/client/packages/lowcoder/src/comps/comps/iconComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/iconComp.tsx
@@ -4,6 +4,8 @@ import { RecordConstructorToView } from "lowcoder-core";
 import { styleControl } from "comps/controls/styleControl";
 import _ from "lodash";
 import {
+  AnimationStyle,
+  AnimationStyleType,
   IconStyle,
   IconStyleType,
   heightCalculator,
@@ -29,33 +31,39 @@ import {
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
 
-const Container = styled.div<{ $style: IconStyleType | undefined }>`
+const Container = styled.div<{
+  $style: IconStyleType | undefined;
+  $animationStyle:AnimationStyleType}>`
   display: flex;
   align-items: center;
   justify-content: center;
-
-  ${(props) => props.$style && css`
-    height: calc(100% - ${props.$style.margin});
-    width: calc(100% - ${props.$style.margin});
-    padding: ${props.$style.padding};
-    margin: ${props.$style.margin};
-    border: ${props.$style.borderWidth} solid ${props.$style.border};
-    border-radius: ${props.$style.radius};
-    background: ${props.$style.background};
-    svg {
-      max-width: ${widthCalculator(props.$style.margin)};
-      max-height: ${heightCalculator(props.$style.margin)};
-      color: ${props.$style.fill};
-      object-fit: contain;
-      pointer-events: auto;
-    }
-  `}
+${props=>props.$animationStyle}
+  ${(props) =>
+    props.$style &&
+    css`
+      height: calc(100% - ${props.$style.margin});
+      width: calc(100% - ${props.$style.margin});
+      padding: ${props.$style.padding};
+      margin: ${props.$style.margin};
+      border: ${props.$style.borderWidth} solid ${props.$style.border};
+      border-radius: ${props.$style.radius};
+      background: ${props.$style.background};
+      rotate:${props.$style.rotation};
+      svg {
+        max-width: ${widthCalculator(props.$style.margin)};
+        max-height: ${heightCalculator(props.$style.margin)};
+        color: ${props.$style.fill};
+        object-fit: contain;
+        pointer-events: auto;
+      }
+    `}
 `;
 
 const EventOptions = [clickEvent] as const;
 
 const childrenMap = {
   style: styleControl(IconStyle),
+  animationStyle: styleControl(AnimationStyle),
   icon: withDefault(IconControl, "/icon:antd/homefilled"),
   autoHeight: withDefault(AutoHeightControl, "auto"),
   iconSize: withDefault(NumberControl, 20),
@@ -86,6 +94,7 @@ const IconView = (props: RecordConstructorToView<typeof childrenMap>) => {
         <Container
           ref={conRef}
           $style={props.style}
+          $animationStyle={props.animationStyle}
           style={{
             fontSize: props.autoHeight
               ? `${height < width ? height : width}px`
@@ -94,7 +103,7 @@ const IconView = (props: RecordConstructorToView<typeof childrenMap>) => {
           }}
           onClick={() => props.onEvent("click")}
         >
-          {props.icon}  
+          {props.icon}
         </Container>
       )}
     >
@@ -130,9 +139,14 @@ let IconBasicComp = (function () {
             children.iconSize.propertyView({
               label: trans("iconComp.iconSize"),
             })}
-          </Section><Section name={sectionNames.style}>
+          </Section>
+            <Section name={sectionNames.style}>
               {children.style.getPropertyView()}
-            </Section></>
+            </Section>
+            <Section name={sectionNames.animationStyle}>
+              {children.animationStyle.getPropertyView()}
+            </Section>
+          </>
         )}
       </>
     ))
diff --git a/client/packages/lowcoder/src/comps/comps/iframeComp.tsx b/client/packages/lowcoder/src/comps/comps/iframeComp.tsx
index bb93ac822..4b83af299 100644
--- a/client/packages/lowcoder/src/comps/comps/iframeComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/iframeComp.tsx
@@ -5,7 +5,7 @@ import { BoolControl } from "../controls/boolControl";
 import styled from "styled-components";
 import { NameConfig, NameConfigHidden, withExposingConfigs } from "../generators/withExposing";
 import { styleControl } from "comps/controls/styleControl";
-import { IframeStyle, IframeStyleType } from "comps/controls/styleControlConstants";
+import { AnimationStyle, AnimationStyleType, IframeStyle, IframeStyleType } from "comps/controls/styleControlConstants";
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import log from "loglevel";
@@ -13,13 +13,16 @@ import log from "loglevel";
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
 
-const Wrapper = styled.div<{ $style: IframeStyleType }>`
+const Wrapper = styled.div<{$style: IframeStyleType; $animationStyle:AnimationStyleType}>`
   width: 100%;
   height: 100%;
   overflow: hidden;
-  border: ${(props) => (props.$style.borderWidth ? props.$style.borderWidth : "1px")} solid ${(props) => props.$style.border};
+  border: ${(props) =>
+      props.$style.borderWidth ? props.$style.borderWidth : '1px'}
+    solid ${(props) => props.$style.border};
   border-radius: calc(min(${(props) => props.$style.radius}, 20px));
-
+rotate:${props => props.$style.rotation}
+${props=>props.$animationStyle}
   iframe {
     border: 0;
     width: 100%;
@@ -41,6 +44,7 @@ let IFrameCompBase = new UICompBuilder(
     allowCamera: BoolControl,
     allowPopup: BoolControl,
     style: styleControl(IframeStyle),
+    animationStyle: styleControl(AnimationStyle),
   },
   (props) => {
     const sandbox = ["allow-scripts", "allow-same-origin"];
@@ -55,7 +59,7 @@ let IFrameCompBase = new UICompBuilder(
     const src = regex.test(props.url) ? props.url : "about:blank";
     log.log(props.url, regex.test(props.url) ? props.url : "about:blank", src);
     return (
-      <Wrapper $style={props.style}>
+      <Wrapper $style={props.style} $animationStyle={props.animationStyle}>
         <iframe src={src} sandbox={sandbox.join(" ")} allow={allow.join(";")} />
       </Wrapper>
     );
@@ -79,9 +83,14 @@ let IFrameCompBase = new UICompBuilder(
       )}
 
       {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+        <>
         <Section name={sectionNames.style}>
           {children.style.getPropertyView()}
         </Section>
+        <Section name={sectionNames.animationStyle}>
+          {children.animationStyle.getPropertyView()}
+          </Section>
+        </>
       )}
     </>
   ))
diff --git a/client/packages/lowcoder/src/comps/comps/imageComp.tsx b/client/packages/lowcoder/src/comps/comps/imageComp.tsx
index b5a2a5728..8c75e3718 100644
--- a/client/packages/lowcoder/src/comps/comps/imageComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/imageComp.tsx
@@ -17,6 +17,8 @@ import _ from "lodash";
 import ReactResizeDetector from "react-resize-detector";
 import { styleControl } from "comps/controls/styleControl";
 import {
+  AnimationStyle,
+  AnimationStyleType,
   ImageStyle,
   ImageStyleType,
   heightCalculator,
@@ -32,7 +34,7 @@ import { DEFAULT_IMG_URL } from "util/stringUtils";
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
 
-const Container = styled.div<{ $style: ImageStyleType | undefined }>`
+const Container = styled.div<{ $style: ImageStyleType | undefined,$animationStyle:AnimationStyleType }>`
   height: 100%;
   width: 100%;
   display: flex;
@@ -47,6 +49,7 @@ const Container = styled.div<{ $style: ImageStyleType | undefined }>`
   img {
     object-fit: contain;
     pointer-events: auto;
+    ${props=>props.$animationStyle}
   }
 
   ${(props) => props.$style && getStyle(props.$style)}
@@ -61,6 +64,7 @@ const getStyle = (style: ImageStyleType) => {
       padding: ${style.padding};
       max-width: ${widthCalculator(style.margin)};
       max-height: ${heightCalculator(style.margin)};
+      rotate: ${style.rotation};
     }
 
     .ant-image-mask {
@@ -135,7 +139,7 @@ const ContainerImg = (props: RecordConstructorToView<typeof childrenMap>) => {
     <ReactResizeDetector
       onResize={onResize}
       render={() => (
-        <Container ref={conRef} $style={props.style}>
+        <Container ref={conRef} $style={props.style} $animationStyle={props.animationStyle}>
           <div
             ref={imgRef}
             style={
@@ -162,6 +166,7 @@ const childrenMap = {
   src: withDefault(StringStateControl, "https://temp.im/350x400"),
   onEvent: eventHandlerControl(EventOptions),
   style: styleControl(ImageStyle),
+  animationStyle: styleControl(AnimationStyle),
   autoHeight: withDefault(AutoHeightControl, "fixed"),
   supportPreview: BoolControl,
 };
@@ -197,6 +202,9 @@ let ImageBasicComp = new UICompBuilder(childrenMap, (props) => {
             <Section name={sectionNames.style}>
               {children.style.getPropertyView()}
             </Section>
+            <Section name={sectionNames.animationStyle}>
+              {children.animationStyle.getPropertyView()}
+            </Section>
           </>
         )}
       </>
diff --git a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx
index 45bafc9e5..a24d72a33 100644
--- a/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/jsonComp/jsonLottieComp.tsx
@@ -6,7 +6,7 @@ import {
 import { dropdownControl } from "comps/controls/dropdownControl";
 import { BoolControl } from "comps/controls/boolControl";
 import { styleControl } from "comps/controls/styleControl";
-import { LottieStyle } from "comps/controls/styleControlConstants";
+import { AnimationStyle, LottieStyle } from "comps/controls/styleControlConstants";
 import { trans } from "i18n";
 import { Section, sectionNames } from "lowcoder-design";
 import { useContext, lazy } from "react";  
@@ -94,22 +94,30 @@ let JsonLottieTmpComp = (function () {
     width: withDefault(NumberControl, 100),
     height: withDefault(NumberControl, 100),
     container: styleControl(LottieStyle),
+    animationStyle: styleControl(AnimationStyle),
     animationStart: dropdownControl(animationStartOptions, "auto"),
     loop: dropdownControl(loopOptions, "single"),
     keepLastFrame: BoolControl.DEFAULT_TRUE,
   };
   return new UICompBuilder(childrenMap, (props) => {
     return (
-      <div style={{
-        padding: `${props.container.margin}`,
-      }}>
+      <div
+        style={{
+          padding: `${props.container.margin}`,
+          animation: props.animationStyle.animation,
+          animationDelay: props.animationStyle.animationDelay,
+          animationDuration: props.animationStyle.animationDuration,
+          animationIterationCount: props.animationStyle.animationIterationCount,
+        }}
+      >
         <div
           style={{
             height: "100%",
             display: "flex",
             justifyContent: "center",
             backgroundColor: `${props.container.background}`,
-            padding: `${props.container.padding}`
+            padding: `${props.container.padding}`,
+            rotate: props.container.rotation,
           }}
         >
           <Player
@@ -147,7 +155,7 @@ let JsonLottieTmpComp = (function () {
                 {children.speed.propertyView({ label: trans("jsonLottie.speed")})}
                 {children.loop.propertyView({ label: trans("jsonLottie.loop")})}
                 {children.animationStart.propertyView({ label: trans("jsonLottie.animationStart")})}
-                {children.keepLastFrame.propertyView({ label: trans("jsonLottie.keepLastFrame")})}
+                 {children.keepLastFrame.propertyView({ label: trans("jsonLottie.keepLastFrame")})}
                 {hiddenPropertyView(children)}
               </Section>
             </>
@@ -158,9 +166,11 @@ let JsonLottieTmpComp = (function () {
               <Section name={sectionNames.style}>
                 {children.container.getPropertyView()}
               </Section>
+              <Section name={sectionNames.animationStyle}>
+                {children.animationStyle.getPropertyView()}
+              </Section>
             </>
           )}
-
         </>
       );
     })
diff --git a/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx b/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx
index 0d82ed705..42ec653c7 100644
--- a/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/listViewComp/listView.tsx
@@ -18,13 +18,16 @@ import {
 import { ContextContainerComp } from "./contextContainerComp";
 import { ListViewImplComp } from "./listViewComp";
 import { getCurrentItemParams, getData } from "./listViewUtils";
+import { AnimationStyleType } from "@lowcoder-ee/index.sdk";
 
-const ListViewWrapper = styled.div<{ $style: any; $paddingWidth: string }>`
+const ListViewWrapper = styled.div<{ $style: any; $paddingWidth: string,$animationStyle:AnimationStyleType }>`
   height: 100%;
   border: 1px solid ${(props) => props.$style.border};
   border-radius: ${(props) => props.$style.radius};
   padding: 3px ${(props) => props.$paddingWidth};
+  rotate: ${(props) => props.$style.rotation};
   background-color: ${(props) => props.$style.background};
+  ${props=>props.$animationStyle}
 `;
 
 const FooterWrapper = styled.div`
@@ -162,7 +165,6 @@ type Props = {
 };
 
 export function ListView(props: Props) {
-  // console.info("<---- listView renders.");
   const { comp } = props;
   const children = comp.children;
   const ref = useRef(null);
@@ -203,6 +205,7 @@ export function ListView(props: Props) {
     };
   }, [children.pagination, totalCount]);
   const style = children.style.getView();
+  const animationStyle = children.animationStyle.getView();
 
   const commonLayout = comp.realSimpleContainer()!.children.layout.getView();
   const isOneItem =
@@ -274,8 +277,7 @@ export function ListView(props: Props) {
   // log.debug("renders: ", renders);
   return (
     <BackgroundColorContext.Provider value={style.background}>
-      <ListViewWrapper $style={style} $paddingWidth={paddingWidth}>
-
+      <ListViewWrapper $style={style} $paddingWidth={paddingWidth} $animationStyle={animationStyle}>
         <BodyWrapper ref={ref} $autoHeight={autoHeight}>
           <ScrollBar style={{ height: autoHeight ? "auto" : "100%", margin: "0px", padding: "0px" }} hideScrollbar={!scrollbars}>
             <ReactResizeDetector
diff --git a/client/packages/lowcoder/src/comps/comps/listViewComp/listViewComp.tsx b/client/packages/lowcoder/src/comps/comps/listViewComp/listViewComp.tsx
index 1e6fe932e..055e1a113 100644
--- a/client/packages/lowcoder/src/comps/comps/listViewComp/listViewComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/listViewComp/listViewComp.tsx
@@ -7,7 +7,7 @@ import {
   StringControl,
 } from "comps/controls/codeControl";
 import { styleControl } from "comps/controls/styleControl";
-import { ListViewStyle } from "comps/controls/styleControlConstants";
+import { AnimationStyle, ListViewStyle } from "comps/controls/styleControlConstants";
 import { UICompBuilder, stateComp, valueComp, withDefault, withPropertyViewFn, withViewFn } from "comps/generators";
 import {
   CompDepsConfig,
@@ -53,6 +53,7 @@ const childrenMap = {
   showBorder: BoolControl,
   pagination: withDefault(PaginationControl, { pageSize: "6" }),
   style: styleControl(ListViewStyle),
+  animationStyle: styleControl(AnimationStyle),
   horizontal: withDefault(BoolControl, false),
   minHorizontalWidth: withDefault(RadiusControl, '100px'),
 };
diff --git a/client/packages/lowcoder/src/comps/comps/listViewComp/listViewPropertyView.tsx b/client/packages/lowcoder/src/comps/comps/listViewComp/listViewPropertyView.tsx
index bfd5f7d0a..5069b9c61 100644
--- a/client/packages/lowcoder/src/comps/comps/listViewComp/listViewPropertyView.tsx
+++ b/client/packages/lowcoder/src/comps/comps/listViewComp/listViewPropertyView.tsx
@@ -79,6 +79,9 @@ export function listPropertyView(compType: ListCompType) {
             </Section>
             <Section name={sectionNames.style}>
               {children.style.getPropertyView()}
+            </Section>
+            <Section name={sectionNames.animationStyle}>
+              {children.animationStyle.getPropertyView()}
             </Section></>
         )}
    
diff --git a/client/packages/lowcoder/src/comps/comps/mediaComp/audioComp.tsx b/client/packages/lowcoder/src/comps/comps/mediaComp/audioComp.tsx
index fcf8783b0..e946c69f4 100644
--- a/client/packages/lowcoder/src/comps/comps/mediaComp/audioComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/mediaComp/audioComp.tsx
@@ -6,7 +6,7 @@ import { UICompBuilder } from "../../generators";
 import { NameConfig, NameConfigHidden, withExposingConfigs } from "../../generators/withExposing";
 import { RecordConstructorToView } from "lowcoder-core";
 import { styleControl } from "comps/controls/styleControl";
-import { ImageStyle } from "comps/controls/styleControlConstants";
+import { AnimationStyle, AnimationStyleType, AudioStyle, ImageStyle } from "comps/controls/styleControlConstants";
 import { TacoAudio } from "lowcoder-design";
 import { BoolControl } from "comps/controls/boolControl";
 import { withDefault } from "../../generators/simpleGenerators";
@@ -16,7 +16,10 @@ import { mediaCommonChildren, mediaMethods } from "./mediaUtils";
 import { useContext } from "react";
 import { EditorContext } from "comps/editorState";
 
-const Container = styled.div`
+const Container = styled.div<{ $style: any; $animationStyle: AnimationStyleType }>`
+${props => props.$style};
+rotate:${props => props.$style.rotation};
+${props=>props.$animationStyle};
   height: 100%;
   width: 100%;
   display: flex;
@@ -42,7 +45,11 @@ const EventOptions = [
 
 const ContainerAudio = (props: RecordConstructorToView<typeof childrenMap>) => {
   return (
-    <Container ref={props.containerRef}>
+    <Container
+      ref={props.containerRef}
+      $style={props.style}
+      $animationStyle={props.animationStyle}
+    >
       <TacoAudio
         audioRef={props.viewRef}
         url={props.src.value}
@@ -59,7 +66,8 @@ const ContainerAudio = (props: RecordConstructorToView<typeof childrenMap>) => {
 const childrenMap = {
   src: withDefault(StringStateControl, trans("audio.defaultSrcUrl")),
   onEvent: eventHandlerControl(EventOptions),
-  style: styleControl(ImageStyle),
+  style: styleControl(AudioStyle),
+  animationStyle: styleControl(AnimationStyle),
   autoPlay: BoolControl,
   loop: BoolControl,
   ...mediaCommonChildren,
@@ -91,7 +99,12 @@ let AudioBasicComp = (function () {
               })}
             </Section>
           )}
-
+          <Section name={sectionNames.style}>
+            {children.style.getPropertyView()}
+          </Section>
+          <Section name={sectionNames.animationStyle}>
+            {children.animationStyle.getPropertyView()}
+          </Section>
         </>
       );
     })
diff --git a/client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx b/client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx
index c8288cf50..24980ca35 100644
--- a/client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx
@@ -6,10 +6,10 @@ import { NameConfig, NameConfigHidden, withExposingConfigs } from "../../generat
 import { RecordConstructorToView } from "lowcoder-core";
 import { useRef, useState } from "react";
 import { styleControl } from "comps/controls/styleControl";
-import { ImageStyle, ImageStyleType } from "comps/controls/styleControlConstants";
+import { AnimationStyle, AnimationStyleType, AudioStyle, ImageStyle, ImageStyleType } from "comps/controls/styleControlConstants";
 import { BoolControl } from "comps/controls/boolControl";
 import { withDefault } from "../../generators/simpleGenerators";
-import { Container, playIcon } from "lowcoder-design";
+import { playIcon } from "lowcoder-design";
 import { RangeControl } from "../../controls/codeControl";
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
@@ -40,12 +40,32 @@ const getStyle = (style: ImageStyleType) => {
     padding: style.padding,
   };
 }; */
+const Container = styled.div<{ $style: any; $animationStyle: AnimationStyleType }>`
+${props => props.$style};
+rotate:${props => props.$style.rotation};
+${props=>props.$animationStyle};
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
+  div > video {
+    object-fit: contain;
+    pointer-events: auto;
+    height: 100%;
+    width: 100%;
+    :focus-visible {
+      outline: 0px;
+    }
+  }
+`;
 const ContainerVideo = (props: RecordConstructorToView<typeof childrenMap>) => {
   const videoRef = useRef<ReactPlayer | null>(null);
   let [posterClicked, setPosterClicked] = useState(false);
   return (
-    <Container ref={props.containerRef}>
+    <Container ref={props.containerRef} $style={props.style}
+      $animationStyle={props.animationStyle}>
       <Video 
         config={{
           file: {
@@ -91,7 +111,8 @@ const childrenMap = {
   src: withDefault(StringStateControl, trans("video.defaultSrcUrl")),
   poster: withDefault(StringStateControl, trans("video.defaultPosterUrl")),
   onEvent: eventHandlerControl(EventOptions),
-  style: styleControl(ImageStyle),
+  style: styleControl(AudioStyle),
+  animationStyle: styleControl(AnimationStyle),
   autoPlay: BoolControl,
   loop: BoolControl,
   controls: BoolControl,
@@ -147,7 +168,14 @@ let VideoBasicComp = (function () {
                   tooltip: trans("video.controlsTooltip"),
                 })}
 
-              </Section></>
+              </Section>
+              <Section name={sectionNames.style}>
+                {children.style.getPropertyView()}
+              </Section>
+              <Section name={sectionNames.animationStyle}>
+                {children.animationStyle.getPropertyView()}
+              </Section>
+            </>
           )}
         </>
       );
diff --git a/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx b/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx
index 6911b9d0e..eb1f04a09 100644
--- a/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx
+++ b/client/packages/lowcoder/src/comps/comps/meetingComp/controlButton.tsx
@@ -55,6 +55,7 @@ const getStyle = (style: any) => {
       border: 1px solid ${style.border};
       border-radius: ${style.radius};
       margin: ${style.margin};
+      rotate: ${style.rotation};
       padding: ${style.padding};
       max-width: ${widthCalculator(style.margin)};
       max-height: ${heightCalculator(style.margin)};
diff --git a/client/packages/lowcoder/src/comps/comps/qrCodeComp.tsx b/client/packages/lowcoder/src/comps/comps/qrCodeComp.tsx
index 9bb3c6f29..a457194f6 100644
--- a/client/packages/lowcoder/src/comps/comps/qrCodeComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/qrCodeComp.tsx
@@ -3,7 +3,7 @@ import { BoolControl } from "comps/controls/boolControl";
 import { stringExposingStateControl } from "comps/controls/codeStateControl";
 import { dropdownControl } from "comps/controls/dropdownControl";
 import { styleControl } from "comps/controls/styleControl";
-import { QRCodeStyle, heightCalculator,	widthCalculator } from "comps/controls/styleControlConstants";
+import { AnimationStyle, QRCodeStyle, heightCalculator,	widthCalculator } from "comps/controls/styleControlConstants";
 import { UICompBuilder } from "comps/generators/uiCompBuilder";
 import { NameConfig, NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing";
 import { Section, sectionNames } from "lowcoder-design";
@@ -31,6 +31,7 @@ const childrenMap = {
   includeMargin: BoolControl.DEFAULT_TRUE,
   image: StringControl,
   style: styleControl(QRCodeStyle),
+  animationStyle: styleControl(AnimationStyle),
 };
 
 const QRCodeView = (props: RecordConstructorToView<typeof childrenMap>) => {
@@ -50,7 +51,12 @@ const QRCodeView = (props: RecordConstructorToView<typeof childrenMap>) => {
         borderRadius: props.style.radius,
         border: `${props.style.borderWidth ? props.style.borderWidth : "1px"} solid ${
           props.style.border
-        }`,
+          }`,
+        rotate: props.style.rotation,
+        animation: props.animationStyle.animation,
+        animationDelay: props.animationStyle.animationDelay,
+        animationDuration: props.animationStyle.animationDuration,
+        animationIterationCount:props.animationStyle.animationIterationCount
       }}
     >
       <QRCodeSVG
@@ -99,10 +105,15 @@ let QRCodeBasicComp = (function () {
         )}
 
         {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
-          <Section name={sectionNames.style}>
+          <>
+            <Section name={sectionNames.style}>
             {children.style.getPropertyView()}
             {children.includeMargin.propertyView({ label: trans("QRCode.includeMargin") })}
-          </Section>
+            </Section>
+            <Section name={sectionNames.animationStyle}>
+            {children.animationStyle.getPropertyView()}
+            </Section>
+          </>
         )}
       </>
     ))
diff --git a/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx b/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx
index d714363ba..f49772863 100644
--- a/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx
+++ b/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx
@@ -56,6 +56,7 @@ const RowWrapper = styled(Row)<{
   padding: ${(props) => props.$style.padding};
   background-color: ${(props) => props.$style.background};
   overflow-x: auto;
+  rotate: ${props=> props.$style.rotation}
 `;
 
 const ColWrapper = styled(Col)<{
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx
index f45e300bc..2cf75d2eb 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/stepControl.tsx
@@ -5,7 +5,7 @@ import { stringExposingStateControl, numberExposingStateControl } from "comps/co
 import { ChangeEventHandlerControl } from "comps/controls/eventHandlerControl";
 import { StepOptionControl } from "comps/controls/optionsControl";
 import { styleControl } from "comps/controls/styleControl";
-import { StepsStyle, StepsStyleType, heightCalculator, widthCalculator, marginCalculator } from "comps/controls/styleControlConstants";
+import { StepsStyle, StepsStyleType, heightCalculator, widthCalculator, marginCalculator, AnimationStyle, AnimationStyleType } from "comps/controls/styleControlConstants";
 import styled, { css } from "styled-components";
 import { UICompBuilder, withDefault } from "../../generators";
 import { CommonNameConfig, NameConfig, withExposingConfigs } from "../../generators/withExposing";
@@ -92,13 +92,15 @@ const StepsChildrenMap = {
   onEvent: ChangeEventHandlerControl,
   options: StepOptionControl,
   style: withDefault( styleControl(StepsStyle), {text:'#D7D9E0'}),
-  viewRef: RefControl<HTMLDivElement>
+  viewRef: RefControl<HTMLDivElement>,
+  animationStyle: styleControl(AnimationStyle)
 };
 
 let StepControlBasicComp = (function () {
   return new UICompBuilder(StepsChildrenMap, (props) => {
 
-    const StyledWrapper = styled.div<{ style: StepsStyleType }>`
+    const StyledWrapper = styled.div<{ style: StepsStyleType, $animationStyle: AnimationStyleType }>`
+    ${props=>props.$animationStyle}
       min-height: 24px;
       max-width: ${widthCalculator(props.style.margin)};
       max-height: ${heightCalculator(props.style.margin)};
@@ -167,7 +169,7 @@ let StepControlBasicComp = (function () {
               }
             }}
           >
-          <StyledWrapper style={props.style}>
+          <StyledWrapper style={props.style} $animationStyle={props.animationStyle}>
             <Steps 
               initial={props.initialValue.value -1}
               current={current}
@@ -245,9 +247,14 @@ let StepControlBasicComp = (function () {
         )}
 
         {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+          <>
           <Section name={sectionNames.style}>
             {children.style.getPropertyView()}
           </Section>
+          <Section name={sectionNames.animationStyle}>
+            {children.animationStyle.getPropertyView()}
+          </Section>
+          </>
         )}
       </>
     ))
diff --git a/client/packages/lowcoder/src/comps/comps/signatureComp.tsx b/client/packages/lowcoder/src/comps/comps/signatureComp.tsx
index d30e35999..ed7a87dea 100644
--- a/client/packages/lowcoder/src/comps/comps/signatureComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/signatureComp.tsx
@@ -12,8 +12,7 @@ import {
   SignatureStyleType,
   widthCalculator,
   heightCalculator,
-  
-  InputFieldStyle
+  SignatureContainerStyle
 } from "comps/controls/styleControlConstants";
 import { stateComp, withDefault } from "comps/generators/simpleGenerators";
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
@@ -97,15 +96,15 @@ const Wrapper = styled.div<{ $style: SignatureStyleType; $isEmpty: boolean }>`
 `;
 
 const childrenMap = {
-  tips: withDefault(StringControl, trans("signature.signHere")),
+  tips: withDefault(StringControl, trans('signature.signHere')),
   onEvent: ChangeEventHandlerControl,
-  label: withDefault(LabelControl, { position: "column", text: "" }),
-  style: styleControl(InputFieldStyle),
+  label: withDefault(LabelControl, {position: 'column', text: ''}),
+  style: styleControl(SignatureContainerStyle),
   labelStyle: styleControl(LabelStyle),
   showUndo: withDefault(BoolControl, true),
   showClear: withDefault(BoolControl, true),
-  value: stateComp(""),
-  inputFieldStyle:styleControl(SignatureStyle),
+  value: stateComp(''),
+  inputFieldStyle: styleControl(SignatureStyle),
   ...formDataChildren,
 };
 
diff --git a/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx
index 5bd7e3253..48d2738f0 100644
--- a/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx
@@ -7,7 +7,7 @@ import { stringExposingStateControl } from "comps/controls/codeStateControl";
 import { eventHandlerControl } from "comps/controls/eventHandlerControl";
 import { TabsOptionControl } from "comps/controls/optionsControl";
 import { styleControl } from "comps/controls/styleControl";
-import { AnimationStyle, AnimationStyleType, ContainerBodyStyle, ContainerBodyStyleType, ContainerHeaderStyle, ContainerHeaderStyleType, TabContainerStyle, TabContainerStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
+import { AnimationStyle, AnimationStyleType, TabBodyStyleType, ContainerHeaderStyle, ContainerHeaderStyleType, TabBodyStyle, TabContainerStyle, TabContainerStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
 import { sameTypeMap, UICompBuilder, withDefault } from "comps/generators";
 import { addMapChildAction } from "comps/generators/sameTypeMap";
 import { NameConfig, NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing";
@@ -59,7 +59,7 @@ const childrenMap = {
   showHeader: withDefault(BoolControl, true),
   style: withDefault(styleControl(TabContainerStyle),{borderWidth:'1px'}),
   headerStyle: styleControl(ContainerHeaderStyle),
-  bodyStyle: styleControl(ContainerBodyStyle),
+  bodyStyle: styleControl(TabBodyStyle),
   animationStyle: styleControl(AnimationStyle),
   tabsGutter: withDefault(NumberControl, 32),
   tabsCentered: withDefault(BoolControl, false),
@@ -71,7 +71,7 @@ type TabbedContainerProps = ViewProps & { dispatch: DispatchType };
 const getStyle = (
   style: TabContainerStyleType,
   headerStyle: ContainerHeaderStyleType,
-  bodyStyle: ContainerBodyStyleType,
+  bodyStyle: TabBodyStyleType,
 ) => {
   return css`
     &.ant-tabs {
@@ -131,7 +131,7 @@ const getStyle = (
 const StyledTabs = styled(Tabs)<{ 
   $style: TabContainerStyleType;
   $headerStyle: ContainerHeaderStyleType;
-  $bodyStyle: ContainerBodyStyleType;
+  $bodyStyle: TabBodyStyleType;
   $isMobile?: boolean; 
   $showHeader?: boolean;
   $animationStyle:AnimationStyleType
diff --git a/client/packages/lowcoder/src/comps/comps/textComp.tsx b/client/packages/lowcoder/src/comps/comps/textComp.tsx
index e380ad3a0..18cf05727 100644
--- a/client/packages/lowcoder/src/comps/comps/textComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textComp.tsx
@@ -146,6 +146,7 @@ let TextTmpComp = (function () {
           justifyContent: props.horizontalAlignment,
           alignItems: props.autoHeight ? "center" : props.verticalAlignment,
           textAlign: props.horizontalAlignment,
+          rotate: props.style.rotation
         }}
       >
         {props.type === "markdown" ? <TacoMarkDown>{value}</TacoMarkDown> : value}
diff --git a/client/packages/lowcoder/src/comps/comps/triContainerComp/triFloatTextContainer.tsx b/client/packages/lowcoder/src/comps/comps/triContainerComp/triFloatTextContainer.tsx
index da088d444..6179ae132 100644
--- a/client/packages/lowcoder/src/comps/comps/triContainerComp/triFloatTextContainer.tsx
+++ b/client/packages/lowcoder/src/comps/comps/triContainerComp/triFloatTextContainer.tsx
@@ -22,6 +22,7 @@ const getStyle = (style: TextStyleType) => {
     border-radius: ${(style.radius ? style.radius : "4px")};
     border: ${(style.borderWidth ? style.borderWidth : "0px")} solid ${style.border};
     color: ${style.text};
+    rotate: ${style.rotation&&style.rotation};
     font-size: ${style.textSize} !important;
     font-weight: ${style.textWeight} !important;
     font-family: ${style.fontFamily} !important;
@@ -188,7 +189,7 @@ export function TriContainer(props: TriContainerProps) {
               containerPadding={[0, 0]}
               showName={{ bottom: showFooter ? 20 : 0 }}
               $backgroundColor={headerStyle?.headerBackground || 'transparent'}
-              style={{ padding: headerStyle.containerHeaderPadding }} />
+              style={{ padding: headerStyle.containerHeaderPadding}} />
         </BackgroundColorContext.Provider>
       )}
       {showBody && (
diff --git a/client/packages/lowcoder/src/comps/controls/labelControl.tsx b/client/packages/lowcoder/src/comps/controls/labelControl.tsx
index 253f283ed..1c8e395c2 100644
--- a/client/packages/lowcoder/src/comps/controls/labelControl.tsx
+++ b/client/packages/lowcoder/src/comps/controls/labelControl.tsx
@@ -199,6 +199,7 @@ export const LabelControl = (function () {
                 props.position === "row" ? getLabelWidth(props.width, props.widthUnit) : "100%",
               maxWidth: props.position === "row" ? "70%" : "100%",
               fontSize: args && args.style ? args?.style?.textSize : "14px",
+              rotate:args?.labelStyle?.rotation
             }}
             $position={props.position}
             $hasToolTip={!!props.tooltip}
@@ -229,6 +230,7 @@ export const LabelControl = (function () {
                 ? `calc(100% - ${getLabelWidth(props.width, props.widthUnit)} - 8px)`
                 : "100%",
             height: props.position === "column" && !!props.text ? "calc(100% - 22px)" : "100%",
+            rotate:args?.inputFieldStyle?.rotation
           }}
         >
           {args.children}
diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
index 313490f74..80f910112 100644
--- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
+++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -773,6 +773,11 @@ export const ButtonStyle = [
   ...STYLING_FIELDS_SEQUENCE
 ] as const;
 
+export const DropdownStyle = [
+  getBackground('primary'),
+  ...STYLING_FIELDS_SEQUENCE.filter(style=>style.name!=='rotation'),
+] as const;
+
 export const ToggleButtonStyle = [
   getBackground("canvas"),
   ...STYLING_FIELDS_SEQUENCE.map((style) => {
@@ -825,7 +830,6 @@ export const ContainerStyle = [
   BORDER_STYLE,
   MARGIN,
   PADDING,
-  ROTATION,
   {
     name: "backgroundImage",
     label: trans("style.backgroundImage"),
@@ -856,7 +860,6 @@ export const ContainerStyle = [
 export const ContainerHeaderStyle = [
   CONTAINER_HEADER_PADDING,
   HEADER_BACKGROUND,
-  ROTATION,
   {
     name: "headerBackgroundImage",
     label: trans("style.backgroundImage"),
@@ -887,7 +890,6 @@ export const ContainerHeaderStyle = [
 export const ContainerSiderStyle = [
   CONTAINER_SIDER_PADDING,
   SIDER_BACKGROUND,
-  ROTATION,
   {
     name: "siderBackgroundImage",
     label: trans("style.backgroundImage"),
@@ -917,7 +919,6 @@ export const ContainerSiderStyle = [
 
 export const ContainerBodyStyle = [
   CONTAINER_BODY_PADDING,
-  ROTATION,
   {
     name: "background",
     label: trans("style.background"),
@@ -1005,12 +1006,11 @@ export const SliderStyle = [
   TRACK,
   MARGIN,
   PADDING,
-  ROTATION,
 ] as const;
 
 export const InputLikeStyle = [
   getStaticBackground(SURFACE_COLOR),
-  ...STYLING_FIELDS_SEQUENCE,
+  ...STYLING_FIELDS_SEQUENCE.filter(style=>style.name!=='rotation'),
   ...ACCENT_VALIDATE,
 ] as const;
 
@@ -1019,7 +1019,7 @@ export const InputLikeStyle = [
 export const ColorPickerStyle = [
   LABEL,
   getStaticBackground(SURFACE_COLOR),
-  ...STYLING_FIELDS_SEQUENCE,
+  ...STYLING_FIELDS_SEQUENCE.filter(style => style.name!=='rotation'),
   ...ACCENT_VALIDATE,
 ] as const;
 
@@ -1034,12 +1034,12 @@ export const AvatarStyle = [
 
 export const avatarContainerStyle = [
   getStaticBackground(SURFACE_COLOR),
-  ...STYLING_FIELDS_CONTAINER_SEQUENCE,
+  ...STYLING_FIELDS_CONTAINER_SEQUENCE.filter(style=>style.name!=='rotation'),
 ] as const;
 
 export const avatarLabelStyle = [
   getStaticBackground(SURFACE_COLOR),
-  ...STYLING_FIELDS_SEQUENCE,
+  ...STYLING_FIELDS_SEQUENCE.filter((style) => style.name !== 'rotation'),
 ] as const;
 
 export const avatarGroupStyle = [
@@ -1068,7 +1068,7 @@ export const FloatButtonStyle = [
 
 export const TransferStyle = [
   getStaticBackground(SURFACE_COLOR),
-  ...STYLING_FIELDS_CONTAINER_SEQUENCE,
+  ...STYLING_FIELDS_CONTAINER_SEQUENCE.filter(style=>style.name!=='rotation'),
 ] as const;
 
 export const CardStyle = [
@@ -1108,7 +1108,7 @@ export const startButtonStyle = [
 
 export const LabelStyle = [
   ...replaceAndMergeMultipleStyles([...InputLikeStyle], "text", [LABEL]).filter(
-    (style) => style.name !== "radius" && style.name !== "background"
+    (style) => style.name !== "radius" && style.name !== "background"&&style.name!=='rotation'
   ),
 ];
 
@@ -1121,6 +1121,15 @@ export const InputFieldStyle = [
   // ...STYLING_FIELDS_CONTAINER_SEQUENCE,
 ] as const;
 
+export const SignatureContainerStyle = [
+  getBackground(),
+  getStaticBorder(),
+  ...STYLING_FIELDS_CONTAINER_SEQUENCE.filter(
+    (style) => ['border'].includes(style.name) === false&&style.name!=='rotation'
+  ),
+  // ...STYLING_FIELDS_CONTAINER_SEQUENCE,
+] as const;
+
 export const RatingStyle = [
   {
     name: "checked",
@@ -1160,14 +1169,14 @@ export const SwitchStyle = [
 ] as const;
 
 export const SelectStyle = [
-  ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, "border", [
+  ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE.filter(style=>style.name!=='rotation'), "border", [
     ...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc"),
   ]),
   ...ACCENT_VALIDATE,
 ] as const;
 
 const multiSelectCommon = [
-  ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, "border", [
+  ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE.filter(style=>style.name!=='rotation'), "border", [
     ...getStaticBgBorderRadiusByBg(SURFACE_COLOR, "pc"),
   ]),
   {
@@ -1214,7 +1223,7 @@ export const TabContainerStyle = [
             style.name
           ) === false
       ),
-      ...STYLING_FIELDS_SEQUENCE,
+      ...STYLING_FIELDS_SEQUENCE.filter(style=>style.name!=='rotation'),
     ],
     "text",
     [
@@ -1230,6 +1239,8 @@ export const TabContainerStyle = [
   ACCENT,
 ] as const;
 
+export const TabBodyStyle=[...ContainerBodyStyle] as const
+
 export const ModalStyle = [
   ...getBgBorderRadiusByBg(),
   BORDER_WIDTH,
@@ -1275,7 +1286,7 @@ function checkAndUncheck() {
 }
 
 export const CheckboxStyle = [
-  ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, "text", [
+  ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE.filter(styles=>styles.name!=='rotation'), "text", [
     STATIC_TEXT,
     VALIDATE,
   ]).filter((style) => style.name !== "border"),
@@ -1291,7 +1302,7 @@ export const CheckboxStyle = [
 ] as const;
 
 export const RadioStyle = [
-  ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, "text", [
+  ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE.filter(style=>style.name!=='rotation'), "text", [
     STATIC_TEXT,
     VALIDATE,
   ]).filter((style) => style.name !== "border" && style.name !== "radius"),
@@ -1527,6 +1538,7 @@ export const FileViewerStyle = [
   MARGIN,
   PADDING,
   BORDER_WIDTH,
+  ROTATION
 ] as const;
 
 export const IframeStyle = [
@@ -1536,6 +1548,13 @@ export const IframeStyle = [
   BORDER_WIDTH,
   MARGIN,
   PADDING,
+  ROTATION
+] as const;
+
+export const CustomStyle = [
+  MARGIN,
+  PADDING,
+  ROTATION,
 ] as const;
 
 export const DateTimeStyle = [
@@ -1605,11 +1624,11 @@ export const ProgressStyle = [
 ] as const;
 
 export const CircleProgressStyle = [
-  ...ProgressStyle.filter((style) => style.name !== "radius"),
+  ...ProgressStyle.filter((style) => style.name !== "radius"&&style.name !== "rotation"),
 ];
 
 export const NavigationStyle = [
-  ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE, "text", [
+  ...replaceAndMergeMultipleStyles(STYLING_FIELDS_SEQUENCE.filter(style=>style.name!=='rotation'), "text", [
     {
       name: "text",
       label: trans("text"),
@@ -1645,6 +1664,13 @@ export const ImageStyle = [
   BORDER_WIDTH,
   MARGIN,
   PADDING,
+  ROTATION
+] as const;
+
+export const AudioStyle = [
+  MARGIN,
+  PADDING,
+  ROTATION,
 ] as const;
 
 export const IconStyle = [
@@ -1655,9 +1681,13 @@ export const IconStyle = [
   BORDER_WIDTH,
   MARGIN,
   PADDING,
+  ROTATION
 ] as const;
 
-export const ListViewStyle = BG_STATIC_BORDER_RADIUS;
+export const ListViewStyle = [
+  ...BG_STATIC_BORDER_RADIUS,
+  ROTATION
+] as const;
 
 export const JsonSchemaFormStyle = BG_STATIC_BORDER_RADIUS;
 
@@ -1673,6 +1703,7 @@ export const QRCodeStyle = [
   BORDER,
   RADIUS,
   BORDER_WIDTH,
+  ROTATION
 ] as const;
 
 export const TimeLineStyle = [
@@ -1791,6 +1822,7 @@ export const LottieStyle = [
   },
   MARGIN,
   PADDING,
+  ROTATION
 ] as const;
 
 export const CommentStyle = [
@@ -1814,6 +1846,7 @@ export const ResponsiveLayoutRowStyle = [
   BORDER_STYLE,
   MARGIN,
   PADDING,
+  ROTATION
 ] as const;
 
 export const ResponsiveLayoutColStyle = [
@@ -1879,7 +1912,7 @@ export const NavLayoutItemActiveStyle = [
   },
 ] as const;
 
-export const CarouselStyle = [getBackground("canvas")] as const;
+export const CarouselStyle = [getBackground("canvas"),ROTATION] as const;
 
 export const RichTextEditorStyle = [
   getStaticBorder(),
@@ -1896,6 +1929,7 @@ export type AvatarContainerStyleType = StyleConfigType<
 >;
 export type AvatarGroupStyleType = StyleConfigType<typeof avatarGroupStyle>;
 export type FloatButtonStyleType = StyleConfigType<typeof FloatButtonStyle>;
+export type DropdownStyleType = StyleConfigType<typeof DropdownStyle>;
 export type BadgeStyleType = StyleConfigType<typeof BadgeStyle>;
 export type TransferStyleType = StyleConfigType<typeof TransferStyle>;
 export type CardStyleType = StyleConfigType<typeof CardStyle>;
@@ -1907,6 +1941,7 @@ export type LabelStyleType = StyleConfigType<typeof LabelStyle>;
 export type AnimationStyleType = StyleConfigType<typeof AnimationStyle>;
 export type InputLikeStyleType = StyleConfigType<typeof InputLikeStyle>;
 export type InputFieldStyleType = StyleConfigType<typeof InputFieldStyle>;
+export type SignatureContainerStyleType = StyleConfigType<typeof SignatureContainerStyle>;
 export type ColorPickerStyleType = StyleConfigType<typeof ColorPickerStyle>;
 export type ButtonStyleType = StyleConfigType<typeof ButtonStyle>;
 export type ToggleButtonStyleType = StyleConfigType<typeof ToggleButtonStyle>;
@@ -1931,6 +1966,7 @@ export type ChildrenMultiSelectStyleType = StyleConfigType<
   typeof ChildrenMultiSelectStyle
 >;
 export type TabContainerStyleType = StyleConfigType<typeof TabContainerStyle>;
+export type TabBodyStyleType = StyleConfigType<typeof TabBodyStyle>;
 export type ModalStyleType = StyleConfigType<typeof ModalStyle>;
 export type CascaderStyleType = StyleConfigType<typeof CascaderStyle>;
 export type CheckboxStyleType = StyleConfigType<typeof CheckboxStyle>;
@@ -1948,6 +1984,7 @@ export type TableColumnLinkStyleType = StyleConfigType<
 export type FileStyleType = StyleConfigType<typeof FileStyle>;
 export type FileViewerStyleType = StyleConfigType<typeof FileViewerStyle>;
 export type IframeStyleType = StyleConfigType<typeof IframeStyle>;
+export type CustomStyleType = StyleConfigType<typeof CustomStyle>;
 export type DateTimeStyleType = StyleConfigType<typeof DateTimeStyle>;
 export type LinkStyleType = StyleConfigType<typeof LinkStyle>;
 export type DividerStyleType = StyleConfigType<typeof DividerStyle>;
@@ -1955,6 +1992,7 @@ export type ProgressStyleType = StyleConfigType<typeof ProgressStyle>;
 export type CircleProgressType = StyleConfigType<typeof CircleProgressStyle>;
 export type NavigationStyleType = StyleConfigType<typeof NavigationStyle>;
 export type ImageStyleType = StyleConfigType<typeof ImageStyle>;
+export type AudioStyleType = StyleConfigType<typeof AudioStyle>;
 export type IconStyleType = StyleConfigType<typeof IconStyle>;
 export type ListViewStyleType = StyleConfigType<typeof ListViewStyle>;
 export type JsonSchemaFormStyleType = StyleConfigType<