.review-card{
	perspective: 1600px;
	transform-style: preserve-3d;
	.card-face{
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1000;
		transition: 500ms all;
		.inner{
			transition: 500ms all;
		}
	}

	@for $i from 1 through 10{
		.before-active-#{$i}{
			transform: translate3d(0, -#{$i*30}px, -#{$i*30}px);
			z-index: #{1000 - ($i*10)};
		}
	}

	@for $i from 1 through 10{
		.after-active-#{$i}{
			transform: translate3d(0, #{$i*30}px, 0);
			opacity: 0;
			z-index: #{1000 - ($i*10)};
			.inner{
				transform: translateY(50%) rotateX(90deg);
			}
		}
		.after-active-#{$i}.after-active-#{$i}-add{
			z-index: #{1000 + ($i*10)};
		}
	}	
}
.review-card{
	perspective: 1600px;
	transform-style: preserve-3d;
	.card-face{
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1000;
		transition: 500ms all ease-in-out;
		.inner{
			transition: 500ms all ease-in-out;
		}
	}

	@for $i from 1 through 10{
		.before-active-#{$i}{
			transform: translate3d(0, -#{$i*30}px, -#{$i*30}px);
			z-index: #{1000 - ($i*10)};
		}
	}

	@for $i from 1 through 10{
		.after-active-#{$i}{
			transform: translate3d(0, #{$i*30}px, 0);
			opacity: 0;
			z-index: #{1000 - ($i*10)};
			.inner{
				transform: translateY(50%) rotateX(90deg);
			}
		}
		.after-active-#{$i}.after-active-#{$i}-add{
			z-index: #{1000 + ($i*10)};
		}
	}	
}
Update ease for stack animation
Update ease for stack animation