JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" class="logo">
	<div class="logo-image-wrapper">
		<div class="logo-image logo-image-1"></div>
		<div class="logo-image logo-image-2"></div>
	</div>
	<div class="logo-content-wrapper">
		<div class="logo-content">А вот и я</div>
	</div>
</a>

CSS

.logo {
	position: relative;
	float: left;
	height: 40px;
	padding: 0 0 0 40px;
	text-decoration: none;
}

.logo-image-wrapper {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
}
.logo-image {
	position: absolute;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	backface-visibility: hidden;
}
.logo-image-1 {
	background: #69c;
}
.logo-image-2 {
	background: #f60;
	transform: rotateY(180deg);
}

.logo-content-wrapper {
	overflow: hidden;
	margin: 0 0 0 10px;
}
.logo-content {
	line-height: 40px;
	transform: translate(-100%, 0);
}

.logo-image,
.logo-content {
	transition: .5s;
}
.logo:hover .logo-content {
	transform: translate(0, 0);
}
.logo:hover .logo-image-1 {
	transform: rotateY(-180deg);
}
.logo:hover .logo-image-2 {
	transform: rotateY(0);
}