diff --git a/packages/core/src/theme/components/HomeFeature/index.tsx b/packages/core/src/theme/components/HomeFeature/index.tsx
index f910ec974..caf33f636 100644
--- a/packages/core/src/theme/components/HomeFeature/index.tsx
+++ b/packages/core/src/theme/components/HomeFeature/index.tsx
@@ -26,7 +26,7 @@ const getGridClass = (feature: Feature): string => {
 function HomeFeatureItem({ feature }: { feature: Feature }): JSX.Element {
   const { icon, title, details, link } = feature;
 
-  const { innerProps, outerProps, outerRef, shineDom } = useCardAnimation();
+  const { outerProps, outerRef, shineDom } = useCardAnimation();
   const navigate = useLinkNavigate();
 
   return (
@@ -36,7 +36,7 @@ function HomeFeatureItem({ feature }: { feature: Feature }): JSX.Element {
       className={`rp-home-feature__item ${getGridClass(feature)}`}
       ref={outerRef}
     >
-      <div className="rp-home-feature__item-wrapper" {...innerProps}>
+      <div className="rp-home-feature__item-wrapper">
         <article
           key={title}
           className={`rp-home-feature__card ${link ? 'rp-home-feature__card--clickable' : ''}`}
diff --git a/packages/core/src/theme/components/HomeFeature/useCardAnimation.tsx b/packages/core/src/theme/components/HomeFeature/useCardAnimation.tsx
index abeb1fd79..993900060 100644
--- a/packages/core/src/theme/components/HomeFeature/useCardAnimation.tsx
+++ b/packages/core/src/theme/components/HomeFeature/useCardAnimation.tsx
@@ -19,8 +19,6 @@ export const useCardAnimation = () => {
 
   let shine: string;
   let shineBg: string;
-  let container: string;
-  let outerContainer: string;
   const handleEnter = () => {
     setIsHovering(true);
   };
@@ -40,17 +38,13 @@ export const useCardAnimation = () => {
     const bodyScrollLeft = document.body.scrollLeft;
 
     const offsets = ele.getBoundingClientRect();
-    const wMultiple = 320 / rootElemWidth;
-    const multiple = wMultiple * 0.05;
     const offsetX =
       0.52 - (pageX - offsets.left - bodyScrollLeft) / rootElemWidth;
     const offsetY =
       0.52 - (pageY - offsets.top - bodyScrollTop) / rootElemHeight;
     const dy = pageY - offsets.top - bodyScrollTop - rootElemHeight / 2;
     const dx = pageX - offsets.left - bodyScrollLeft - rootElemWidth / 2;
-    const yRotate = (offsetX - dx) * multiple;
-    const xRotate =
-      (dy - offsetY) * (Math.min(offsets.width / offsets.height, 1) * multiple);
+
     const arad = Math.atan2(dy, dx);
     const rawAngle = (arad * 180) / Math.PI - 90;
     const angle = rawAngle < 0 ? rawAngle + 360 : rawAngle;
@@ -60,20 +54,14 @@ export const useCardAnimation = () => {
       ((pageY - offsets.top - bodyScrollTop) / rootElemHeight) * 0.2
     }) 0%, rgba(255, 255, 255, 0) 50%)`;
 
-    container = `rotateX(${xRotate}deg) rotateY(${yRotate}deg)`;
-    outerContainer = `perspective(${rootElemWidth * 2}px)`;
+    // container = `rotateX(${xRotate}deg) rotateY(${yRotate}deg)`;
+    // outerContainer = `perspective(${rootElemWidth * 2}px)`;
   } else {
     shine = '';
     shineBg = '';
-    container = '';
-    outerContainer = '';
   }
 
   const outerProps: HTMLAttributes<HTMLDivElement> = {
-    style: {
-      transform: outerContainer,
-      transformStyle: 'preserve-3d',
-    },
     onMouseEnter: handleEnter,
     onMouseLeave: handleLeave,
     onMouseMove: handleMove,
@@ -83,12 +71,6 @@ export const useCardAnimation = () => {
   };
   const outerRef = ref;
 
-  const innerProps = {
-    style: {
-      transform: container,
-    },
-  };
-
   const shineDom = (
     <div
       className="rp-home-feature__item__shine"
@@ -119,7 +101,6 @@ export const useCardAnimation = () => {
   return {
     outerProps,
     outerRef,
-    innerProps,
     shineDom,
   };
 };