JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block">
							блок
							<span class="mask-1">дверца</span>
                            <span class="mask-2">тень</span>
						</div>

CSS

body {
    text-align: center;    
}
.block {
    display: inline-block;
    font-size: 42px;
    border: 1px solid;
    position: relative;
    margin-top: 30px;
}
.block span {
    font-size: 18px;
}
.mask-1 {
	position: absolute;
    left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: #2195DE;
	z-index: 2;
    
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	transition: all 1s;
    transform-origin: top;
	transform: perspective(100px) rotateX(0deg);
}
.block:hover .mask-1 {
	transform: rotateX(90deg);
}

.mask-2 {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: #0965A0;
    
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	transition: all 2s;
    transform-origin: bottom;
	transform: perspective(600px) rotateX(-90deg);
}
.block:hover .mask-2 {
    transform: perspective(200px) rotateX(0deg);
}