JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<div id="wrapper">
    
    <div id="left-side">
        <div id="left-side-rotate-layer">
            <div id="polukrug-left"></div>
        </div>
    </div>

    <div id="right-side">
        <div id="right-side-rotate-layer">
            <div id="polukrug-right"></div>
        </div>
    </div>

</div>

CSS

#wrapper {
	width: 100px;
	height: 100px;
	background: #fafafa;
}


#left-side {
	width: 50px;
	height: 100px;
	float: left;
	overflow: hidden;
	position: relative;
}

#right-side {
	width: 50px;
	height: 100px;
	float: right;
	overflow: hidden;
	position: relative;
}

#left-side-rotate-layer {
	width: 100px;
	height: 100px;
	position: absolute;
	left: 0;
	transition: ease-in-out 2s;
}

#right-side-rotate-layer {
	width: 100px;
	height: 100px;
	position: absolute;
	right: 0;
	transition: ease-in-out 2s;
}

#polukrug-left {
	float: left;
	width: 50px;
	height: 100px;
	background: #FF6600;
	border-radius: 50px 0  0 50px;
}

#polukrug-right {
	float: right;
	width: 50px;
	height: 100px;
	background: #FF6600;
	border-radius: 0 50px 50px 0;
}


#wrapper:hover #left-side-rotate-layer {
		transform:rotate(180deg);
	}


#wrapper:hover #right-side-rotate-layer {
		transform:rotate(-180deg);
	}