diff --git a/client/packages/lowcoder/src/comps/comps/carouselComp.tsx b/client/packages/lowcoder/src/comps/comps/carouselComp.tsx
index 2d6197fea..9ebe3df8d 100644
--- a/client/packages/lowcoder/src/comps/comps/carouselComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/carouselComp.tsx
@@ -11,7 +11,7 @@ import { formDataChildren, FormDataPropertyView } from "./formComp/formDataConst
 import { PositionControl } from "comps/controls/dropdownControl";
 import { useRef, useState } from "react";
 import ReactResizeDetector from "react-resize-detector";
-import { ArrayStringControl, StringControl } from "comps/controls/codeControl";
+import { ArrayStringControl } from "comps/controls/codeControl";
 import { styleControl } from "comps/controls/styleControl";
 import { AnimationStyle, AnimationStyleType, CarouselStyle } from "comps/controls/styleControlConstants";
 
@@ -25,12 +25,11 @@ const CarouselItem = styled.div<{ $src: string }>`
   background-size: contain;
 `;
 
-const Container = styled.div<{$bg: string; $rotation: string; $animationStyle:AnimationStyleType}>`
+const Container = styled.div<{$bg: string; $animationStyle:AnimationStyleType}>`
   &,
   .ant-carousel {
     height: 100%;
     background-color: ${(props) => props.$bg};
-    rotate: ${(props) => props.$rotation};
     ${props=>props.$animationStyle}
   }
 `;
@@ -47,7 +46,6 @@ let CarouselBasicComp = (function () {
     dotPosition: withDefault(PositionControl, "bottom"),
     style: styleControl(CarouselStyle),
     animationStyle: styleControl(AnimationStyle),
-    restrictPaddingOnRotation:withDefault(StringControl, 'imageCarousel'),
     ...formDataChildren,
   };
   return new UICompBuilder(childrenMap, (props) => {
@@ -62,7 +60,6 @@ let CarouselBasicComp = (function () {
       <Container
         ref={containerRef}
         $bg={props.style.background}
-        $rotation={props.style.rotation}
         $animationStyle={props.animationStyle}
       >
         <ReactResizeDetector onResize={onResize}>
diff --git a/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx b/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx
index b9f4d705e..a8bbe06ef 100644
--- a/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/fileViewerComp.tsx
@@ -6,7 +6,7 @@ import { DocumentViewer } from "react-documents";
 import styled, { css } from "styled-components";
 import { Section, sectionNames } from "lowcoder-design";
 import { StringControl } from "../controls/codeControl";
-import { UICompBuilder, withDefault } from "../generators";
+import { UICompBuilder } from "../generators";
 import { NameConfig, NameConfigHidden, withExposingConfigs } from "../generators/withExposing";
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
@@ -20,7 +20,6 @@ const getStyle = (style: FileViewerStyleType) => {
     height: ${heightCalculator(style.margin)};	
     margin: ${style.margin};	
     padding: ${style.padding};
-    rotate: ${style.rotation};
 
     overflow: hidden;
     background-color: ${style.background};
@@ -70,7 +69,6 @@ let FileViewerBasicComp = (function () {
     src: StringControl,
     style: styleControl(FileViewerStyle),
     animationStyle: styleControl(AnimationStyle),
-    restrictPaddingOnRotation: withDefault(StringControl, 'fileViewer'),
   };
   return new UICompBuilder(childrenMap, (props) => {
     if (isEmpty(props.src)) {
diff --git a/client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx b/client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx
index 860abea22..767e2837f 100644
--- a/client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/mediaComp/videoComp.tsx
@@ -6,11 +6,15 @@ import { NameConfig, NameConfigHidden, withExposingConfigs } from "../../generat
 import { RecordConstructorToView } from "lowcoder-core";
 import { useRef, useState } from "react";
 import { styleControl } from "comps/controls/styleControl";
-import { AnimationStyle, AnimationStyleType, AudioStyle, ImageStyle, ImageStyleType } from "comps/controls/styleControlConstants";
+import {
+  AnimationStyle,
+  AnimationStyleType,
+  VideoStyle,
+} from 'comps/controls/styleControlConstants';
 import { BoolControl } from "comps/controls/boolControl";
 import { withDefault } from "../../generators/simpleGenerators";
 import { playIcon } from "lowcoder-design";
-import { RangeControl, StringControl } from "../../controls/codeControl";
+import { RangeControl } from "../../controls/codeControl";
 import { hiddenPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { Video } from "lowcoder-design";
@@ -108,19 +112,18 @@ const ContainerVideo = (props: RecordConstructorToView<typeof childrenMap>) => {
 };
 
 const childrenMap = {
-  src: withDefault(StringStateControl, trans("video.defaultSrcUrl")),
-  poster: withDefault(StringStateControl, trans("video.defaultPosterUrl")),
+  src: withDefault(StringStateControl, trans('video.defaultSrcUrl')),
+  poster: withDefault(StringStateControl, trans('video.defaultPosterUrl')),
   onEvent: eventHandlerControl(EventOptions),
-  style: styleControl(AudioStyle),
+  style: styleControl(VideoStyle),
   animationStyle: styleControl(AnimationStyle),
   autoPlay: BoolControl,
   loop: BoolControl,
   controls: BoolControl,
   volume: RangeControl.closed(0, 1, 1),
   playbackRate: RangeControl.closed(1, 2, 1),
-  currentTimeStamp: numberExposingStateControl("currentTimeStamp", 0),
-  duration: numberExposingStateControl("duration"),
-  restrictPaddingOnRotation:withDefault(StringControl, 'video'),
+  currentTimeStamp: numberExposingStateControl('currentTimeStamp', 0),
+  duration: numberExposingStateControl('duration'),
   ...mediaCommonChildren,
 };
  
diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
index 83d106ede..b867bbe9a 100644
--- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
+++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx
@@ -1556,7 +1556,6 @@ export const FileViewerStyle = [
   MARGIN,
   PADDING,
   BORDER_WIDTH,
-  ROTATION
 ] as const;
 
 export const IframeStyle = [
@@ -1691,6 +1690,8 @@ export const AudioStyle = [
   ROTATION,
 ] as const;
 
+export const VideoStyle = [MARGIN, PADDING] as const;
+
 export const IconStyle = [
   getStaticBackground("#00000000"),
   getStaticBorder("#00000000"),
@@ -1930,7 +1931,7 @@ export const NavLayoutItemActiveStyle = [
   },
 ] as const;
 
-export const CarouselStyle = [getBackground("canvas"),ROTATION] as const;
+export const CarouselStyle = [getBackground("canvas")] as const;
 
 export const RichTextEditorStyle = [
   getStaticBorder(),
@@ -2012,6 +2013,7 @@ 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 VideoStyleType = StyleConfigType<typeof VideoStyle>;
 export type IconStyleType = StyleConfigType<typeof IconStyle>;
 export type ListViewStyleType = StyleConfigType<typeof ListViewStyle>;
 export type JsonSchemaFormStyleType = StyleConfigType<
diff --git a/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx b/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
index 9e3d55bec..da84424de 100644
--- a/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
+++ b/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
@@ -257,40 +257,64 @@ function UIView(props: {
     boxShadowVal = defaultChildren.style?.children?.boxShadow?.valueAndMsg?.value;
     restrictPaddingOnRotationVal = defaultChildren?.restrictPaddingOnRotation?.valueAndMsg?.value;
   }
-  const getPadding = () =>(rotationVal === null ||
-            rotationVal === undefined ||
-            restrictPaddingOnRotation) &&
-          (boxShadowVal === null ||
-            boxShadowVal === undefined ||
-            boxShadowVal === '0px')
-            ? restrictPaddingOnRotationVal === 'qrCode'
-              ? rotationVal !== '' && rotationVal !== '0deg'?'35% 0px':'0px'
-              : restrictPaddingOnRotationVal === 'image'
-                ? rotationVal !== '' && rotationVal !== '0deg'?'10% 0px':'0px'
-                : restrictPaddingOnRotationVal === 'imageCarousel'
-                  ? rotationVal !== '' && rotationVal !== '0deg'?'35% 0px':'0px'
-                  : restrictPaddingOnRotationVal === 'fileViewer'
-                    ? rotationVal !== '' && rotationVal !== '0deg'?'65% 0px':'0px'
-                    : restrictPaddingOnRotationVal === 'controlButton'
-                      ? rotationVal !== '' && rotationVal !== '0deg'?'10% 0px':'0px'
-                      : restrictPaddingOnRotationVal === 'video'
-                        ? rotationVal !== '' && rotationVal !== '0deg'?'26% 0px':'0px'
-                        : '0px' // Both rotation and box-shadow are empty or restricted
-            : rotationVal !== '' && rotationVal !== '0deg' // Rotation applied
-              ? boxShadowVal === null ||
-                boxShadowVal === undefined ||
-                boxShadowVal === '0px'
-                ? `calc(min(50%, ${Math.abs(rotationVal.replace('deg', '')) / 90} * 100%)) 0px`
-                : boxShadowVal !== '' && boxShadowVal !== '0px' // Both rotation and box-shadow applied
-                  ? `calc(min(50%, ${Math.abs(rotationVal.replace('deg', '') + parseFloat(boxShadowVal.replace('px', ''))) / 90} * 100%)) 0px`
-                  : `calc(min(50%, ${Math.abs(rotationVal.replace('deg', '')) / 90} * 100%)) 0px` // Only rotation applied
-              : boxShadowVal === null ||
-                  boxShadowVal === undefined ||
-                  boxShadowVal === '0px'
-                ? '0px'
-                : boxShadowVal !== '' && boxShadowVal !== '0px' // Box-shadow applied
-                  ? `calc(min(50%, ${Math.abs(parseFloat(boxShadowVal.replace('px', ''))) / 90} * 100%)) 0px`
-                  : '0px' // Default value if neither rotation nor box-shadow is applied
+  const getPadding = () => {
+    if (
+      (rotationVal === null ||
+        rotationVal === undefined ||
+        restrictPaddingOnRotation) &&
+      (boxShadowVal === null ||
+        boxShadowVal === undefined ||
+        boxShadowVal === '0px')
+    ) {
+      if (restrictPaddingOnRotationVal === 'qrCode') {
+        if (rotationVal !== '' && rotationVal !== '0deg') {
+          return '35% 0px';
+        } else {
+          return '0px';
+        }
+      } else if (restrictPaddingOnRotationVal === 'image') {
+        if (rotationVal !== '' && rotationVal !== '0deg') {
+          return '10% 0px';
+        } else {
+          return '0px';
+        }
+      } else if (restrictPaddingOnRotationVal === 'controlButton') {
+        if (rotationVal !== '' && rotationVal !== '0deg') {
+          return '10% 0px';
+        } else {
+          return '0px';
+        }
+      } else {
+        return '0px'; // Both rotation and box-shadow are empty or restricted
+      }
+    } else if (rotationVal !== '' && rotationVal !== '0deg') {
+      // Rotation applied
+      if (
+        boxShadowVal === null ||
+        boxShadowVal === undefined ||
+        boxShadowVal === '0px'
+      ) {
+        return `calc(min(50%, ${Math.abs(rotationVal.replace('deg', '')) / 90} * 100%)) 0px`;
+      } else if (boxShadowVal !== '' && boxShadowVal !== '0px') {
+        // Both rotation and box-shadow applied
+        return `calc(min(50%, ${Math.abs(rotationVal.replace('deg', '') + parseFloat(boxShadowVal.replace('px', ''))) / 90} * 100%)) 0px`;
+      } else {
+        return `calc(min(50%, ${Math.abs(rotationVal.replace('deg', '')) / 90} * 100%)) 0px`; // Only rotation applied
+      }
+    } else if (
+      boxShadowVal === null ||
+      boxShadowVal === undefined ||
+      boxShadowVal === '0px'
+    ) {
+      return '0px';
+    } else if (boxShadowVal !== '' && boxShadowVal !== '0px') {
+      // Box-shadow applied
+      return `calc(min(50%, ${Math.abs(parseFloat(boxShadowVal.replace('px', ''))) / 90} * 100%)) 0px`;
+    } else {
+      return '0px'; // Default value if neither rotation nor box-shadow is applied
+    }
+  };
+
   return (
     <div
       ref={props.innerRef}