diff --git a/projects/demo/src/modules/experimental/swipe-action/examples/1/index.html b/projects/demo/src/modules/experimental/swipe-action/examples/1/index.html
index 01610649664e..1ab9b530b078 100644
--- a/projects/demo/src/modules/experimental/swipe-action/examples/1/index.html
+++ b/projects/demo/src/modules/experimental/swipe-action/examples/1/index.html
@@ -60,3 +60,48 @@
         tuiSwipeAction
     ></button>
 </tui-swipe-actions>
+
+<tui-swipe-actions [style.--t-item-size]="32">
+    <button
+        tuiSurface
+        class="surface"
+    >
+        <div tuiCell>
+            <tui-avatar
+                appearance="primary"
+                src="tuiIconBriefcase"
+            ></tui-avatar>
+            <div tuiTitle>
+                <strong>{{ 5000 | tuiAmount: 'EUR' | async }}</strong>
+                <div tuiSubtitle>Vacations</div>
+            </div>
+        </div>
+    </button>
+
+    <button
+        iconLeft="tuiIconEye"
+        size="s"
+        tuiIconButton
+        tuiSwipeAction
+    ></button>
+    <button
+        iconLeft="tuiIconEdit3"
+        size="s"
+        tuiIconButton
+        tuiSwipeAction
+    ></button>
+    <button
+        appearance="secondary"
+        iconLeft="tuiIconShare"
+        size="s"
+        tuiIconButton
+        tuiSwipeAction
+    ></button>
+    <button
+        appearance="destructive"
+        iconLeft="tuiIconTrash"
+        size="s"
+        tuiIconButton
+        tuiSwipeAction
+    ></button>
+</tui-swipe-actions>
diff --git a/projects/demo/src/modules/experimental/swipe-action/examples/1/index.less b/projects/demo/src/modules/experimental/swipe-action/examples/1/index.less
index 7af487e1846e..aaacb995c6c1 100644
--- a/projects/demo/src/modules/experimental/swipe-action/examples/1/index.less
+++ b/projects/demo/src/modules/experimental/swipe-action/examples/1/index.less
@@ -1,7 +1,7 @@
 .surface {
     margin: 1.5rem 1rem;
     min-width: 17rem;
-    padding: 0.75rem 1rem;
+    padding: 1rem;
     box-shadow: var(--tui-shadow);
 
     &:active {
diff --git a/projects/demo/src/modules/experimental/swipe-action/examples/2/index.less b/projects/demo/src/modules/experimental/swipe-action/examples/2/index.less
index 7b4ddc8b5f9a..ac4b0429b2a0 100644
--- a/projects/demo/src/modules/experimental/swipe-action/examples/2/index.less
+++ b/projects/demo/src/modules/experimental/swipe-action/examples/2/index.less
@@ -13,6 +13,7 @@
     justify-content: space-between;
     align-items: center;
     color: var(--tui-text-01-night);
+    z-index: 1;
 
     &:before {
         backdrop-filter: blur(1rem);
diff --git a/projects/experimental/components/swipe-action/swipe-actions.component.ts b/projects/experimental/components/swipe-action/swipe-actions.component.ts
index 1b1a2daa1aea..c35573d6b65c 100644
--- a/projects/experimental/components/swipe-action/swipe-actions.component.ts
+++ b/projects/experimental/components/swipe-action/swipe-actions.component.ts
@@ -1,6 +1,4 @@
-import {ChangeDetectionStrategy, Component, ElementRef, ViewChild} from '@angular/core';
-import {animationFrameScheduler, Subject} from 'rxjs';
-import {map, throttleTime} from 'rxjs/operators';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
 
 @Component({
     selector: 'tui-swipe-actions',
@@ -8,29 +6,19 @@ import {map, throttleTime} from 'rxjs/operators';
     styleUrls: ['./swipe-actions.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     host: {
-        '[style.width.px]': 'width',
-        '[$.style.--t-swiped]': 'swiped$',
-        '($.style.--t-swiped)': '0',
-        '(scroll.silent)': 'onScroll($event.target)',
+        '[style.--t-actions-width]': 'actionsWidth',
+        '[style.--t-content-width]': 'contentWidth',
     },
 })
 export class TuiSwipeActionsComponent {
-    private readonly swiped$$ = new Subject<HTMLElement>();
+    actionsWidth = 0;
+    contentWidth = 0;
 
-    @ViewChild('actions', {read: ElementRef})
-    actions?: ElementRef<HTMLElement>;
-
-    width = 0;
-    swiped$ = this.swiped$$.pipe(
-        throttleTime(0, animationFrameScheduler),
-        map(el => el.scrollLeft / (this.actions?.nativeElement.offsetWidth || 0) - 1),
-    );
-
-    onScroll(element: HTMLElement): void {
-        this.swiped$$.next(element);
+    onResizeContent(event: ResizeObserverEntry): void {
+        this.contentWidth = event.target.clientWidth;
     }
 
-    onResize(event: ResizeObserverEntry): void {
-        this.width = event.contentRect.width;
+    onResizeActions(event: ResizeObserverEntry): void {
+        this.actionsWidth = event.target.clientWidth;
     }
 }
diff --git a/projects/experimental/components/swipe-action/swipe-actions.style.less b/projects/experimental/components/swipe-action/swipe-actions.style.less
index 5bed03cb1149..46c73ee8c27e 100644
--- a/projects/experimental/components/swipe-action/swipe-actions.style.less
+++ b/projects/experimental/components/swipe-action/swipe-actions.style.less
@@ -2,11 +2,19 @@
 
 :host {
     .scrollbar-hidden();
-    --t-action-gap: 1.5rem;
+    --t-action-gap: 24;
+    --t-actions-padding: 0.5rem;
+    --t-item-size: 44;
+
     display: inline-flex;
+    width: calc(1px * var(--t-content-width));
     align-items: center;
     overflow: scroll;
     scroll-snap-type: x mandatory;
+    perspective: 1px;
+    perspective-origin: calc(
+        calc(1px * var(--t-content-width)) + calc(1px * var(--t-item-size) / 2) + var(--t-actions-padding)
+    );
 }
 
 .t-content {
@@ -16,10 +24,11 @@
 
 .t-actions {
     display: inline-flex;
-    gap: var(--t-action-gap);
-    padding: 0 1rem 0 0.5rem;
+    gap: calc(1px * var(--t-action-gap));
+    padding: 0 1rem 0 var(--t-actions-padding);
     scroll-snap-align: start;
     align-items: center;
+    transform-style: preserve-3d;
 
     ::ng-deep & > * {
         .loop(6);
@@ -29,8 +38,11 @@
 .loop (@i) when (@i > 1) {
     .loop(@i - 1);
     &:nth-child(@{i}) {
-        transform: ~'translate3d(calc(var(--t-swiped) * ((@{i} - 1) * 100%)), 0, 0)';
-        backface-visibility: hidden;
-        will-change: transform;
+        --t-distance: ~'calc(var(--t-item-size) + var(--t-action-gap)) * calc(@{i} - 1)';
+        --t-factor: calc((var(--t-actions-width) - var(--t-distance)) / var(--t-actions-width));
+        --t-scale: calc(1 / var(--t-factor));
+        --t-translate: calc(1px * (1 - 1 / var(--t-factor)));
+        transform: ~'translate3d(calc(calc((-100% - calc(1px * var(--t-action-gap))) * (@{i} - 1)) / var(--t-scale)), 0, var(--t-translate))';
+        scale: var(--t-scale);
     }
 }
diff --git a/projects/experimental/components/swipe-action/swipe-actions.template.html b/projects/experimental/components/swipe-action/swipe-actions.template.html
index a5598a50d0e5..fbfc29197afc 100644
--- a/projects/experimental/components/swipe-action/swipe-actions.template.html
+++ b/projects/experimental/components/swipe-action/swipe-actions.template.html
@@ -1,13 +1,13 @@
 <div
     class="t-content"
-    (tuiResize)="onResize($event[0])"
+    (tuiResize)="onResizeContent($event[0])"
 >
     <ng-content></ng-content>
 </div>
 
 <div
-    #actions
     class="t-actions"
+    (tuiResize)="onResizeActions($event[0])"
 >
     <ng-content select="[tuiSwipeAction]"></ng-content>
 </div>