После transform элемент размытый

let openSpan = document.querySelectorAll('.openSpan'); 
 
for (let i = 0; i < openSpan.length; i++) { 
    openSpan[i].addEventListener('click', () => { 
        openSpan[i].classList.toggle('active'); 
    }); 
}

.service-block__card { 
	background-color: white; 
	display: -moz-flex; 
	display: -ms-flex; 
	display: -o-flex; 
	display: -webkit-box; 
	display: -ms-flexbox; 
	display: -webkit-flex; 
	display: -moz-box; 
	display: flex; 
	-webkit-box-orient: vertical; 
	-webkit-box-direction: normal; 
	    -ms-flex-direction: column; 
	        -webkit-flex-direction: column; 
	           -moz-box-orient: vertical; 
	           -moz-box-direction: normal; 
	        flex-direction: column; 
	max-width: 500px; 
	margin: 10px auto 0; 
	padding: 10px; 
	-webkit-box-align: center; 
	    -ms-flex-align: center; 
	        -webkit-align-items: center; 
	           -moz-box-align: center; 
	        align-items: center; 
	-webkit-transition: all .2s linear; 
	-o-transition: all .2s linear; 
	-moz-transition: all .2s linear; 
	transition: all .2s linear; 
} 
 
.service-block__card-text { 
	display: -moz-flex; 
	display: -ms-flex; 
	display: -o-flex; 
	display: -webkit-box; 
	display: -ms-flexbox; 
	display: -webkit-flex; 
	display: -moz-box; 
	display: flex; 
	-webkit-box-orient: vertical; 
	-webkit-box-direction: normal; 
	    -ms-flex-direction: column; 
	        -webkit-flex-direction: column; 
	           -moz-box-orient: vertical; 
	           -moz-box-direction: normal; 
	        flex-direction: column; 
	overflow: hidden; 
} 
 
.hide__text { 
	overflow: hidden; 
	-webkit-transition: all .4s linear; 
	-o-transition: all .4s linear; 
	-moz-transition: all .4s linear; 
	transition: all .4s linear; 
} 
 
.service-block__card-open { 
	color: black; 
	font-weight: bold; 
	margin: 10px auto; 
	font-size: 20px; 
	cursor: pointer; 
	-moz-user-select: none; 
	-webkit-user-select: none; 
	    -ms-user-select: none; 
	        user-select: none;   
	display: block; 
} 
 
:root { 
	--atf: cubic-bezier(.58,-0.71,.41,1.55); 
	--spanNum: 2rem; 
	--spanNumTopB: -webkit-calc(-1 * ( var(--spanNum)*1.2 ) ); 
	--spanNumTopB: -moz-calc(-1 * ( var(--spanNum)*1.2 ) ); 
	--spanNumTopB: calc(-1 * ( var(--spanNum)*1.2 ) ); 
	--spanNumLeftB: -webkit-calc( -1 * ( (var(--spanNum)*11)/160 ) ); 
	--spanNumLeftB: -moz-calc( -1 * ( (var(--spanNum)*11)/160 ) ); 
	--spanNumLeftB: calc( -1 * ( (var(--spanNum)*11)/160 ) ); 
	--spanNumSec: 1s; 
} 
 
.openSpan { 
	display: -webkit-box; 
	display: -ms-flexbox; 
	display: -webkit-flex; 
	display: -moz-box; 
	display: flex; 
	font-size: var(--spanNum); 
	font-family: sans-serif; 
	font-weight: bold; 
	text-transform: uppercase; 
	-webkit-perspective: 1000px; 
	        -moz-perspective: 1000px; 
	     perspective: 1000px; 
	-moz-user-select: none; 
	-webkit-user-select: none; 
	    -ms-user-select: none; 
	        user-select: none; 
	cursor: pointer; 
	max-height: var(--spanNum); 
} 
 
.openSpan .ab { 
	position: relative; 
	-webkit-transform-style: preserve-3d; 
	        -moz-transform-style: preserve-3d; 
	     transform-style: preserve-3d; 
	-webkit-transition: var(--spanNumSec) var(--atf) transform; 
	-o-transition: var(--spanNumSec) var(--atf) transform; 
	-moz-transition: var(--spanNumSec) var(--atf) transform; 
	transition: var(--spanNumSec) var(--atf) transform; 
} 
 
.openSpan .ab > div { 
	width: 100%; 
	-webkit-backface-visibility: hidden; 
	        -moz-backface-visibility: hidden; 
	     backface-visibility: hidden; 
	text-align: end; 
} 
 
.openSpan .b { 
	margin-top: var(--spanNumTopB); 
	margin-left: var(--spanNumLeftB); 
	-webkit-transform: rotateX(180deg) rotateZ(90deg); 
	        -moz-transform: rotateX(180deg) rotateZ(90deg); 
	     transform: rotateX(180deg) rotateZ(90deg); 
} 
 
.openSpan .c { 
	-webkit-transition: var(--spanNumSec) var(--atf) transform; 
	-o-transition: var(--spanNumSec) var(--atf) transform; 
	-moz-transition: var(--spanNumSec) var(--atf) transform; 
	transition: var(--spanNumSec) var(--atf) transform; 
} 
 
.openSpan.active .ab{ 
	-webkit-transform: rotateX(180deg) rotateZ(90deg); 
	        -moz-transform: rotateX(180deg) rotateZ(90deg); 
	     transform: rotateX(180deg) rotateZ(90deg); 
} 
 
.openSpan.active .c { 
	-webkit-transform: rotateX(-360deg); 
	        -moz-transform: rotateX(-360deg); 
	     transform: rotateX(-360deg); 
}

<span class="openSpan"> 
	<div class="ab"> 
		<div class="a">Раз</div> 
		<div class="b">С</div> 
	</div> 
	<div class="c">вернуть</div> 
</span>