<!DOCTYPE html>
<html>
<head>
	<title>page</title>
	 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<link rel="stylesheet" type="text/css" href="1.page.css">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
</head>
<body>

	<div class="bento-menu">
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<p>BENTO MENU</p>
	</div>

	<div class="kebab-menu">
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<p>KEBAB MENU</p>
	</div>

	<div class="meatball-menu">
		<span></span>
		<span></span>
		<span></span>
		<p>MEATBALL MENU</p>
	</div>

</body>
</html>
@import url('https://fonts.googleapis.com/css?family=Chakra+Petch:600');
body{
	margin: 50px;
	padding: 0;
	background: #262626;
	font-family: 'Chakra Petch', sans-serif;
	font-size: 36px;
}
.bento-menu{
	width: 250px;
	height: 250px;
	position: absolute;
	top: 50%;
	left: 10%;
	transform: translateY(-50%);
}
.bento-menu span{
	width: 70px;
	height: 70px;
	background: #fff;
	position: absolute;
}
.bento-menu span:nth-child(1){
	top: 0;
	left: 0;
	transition: .6s;
}
.bento-menu span:nth-child(2){
	top: 0;
	left: 88px;
	transition: .6s;
}
.bento-menu span:nth-child(3){
	top: 0;
	left:175px;
	transition: .6s;
}
.bento-menu span:nth-child(4){
	top: 88px;
	left: 0;
	transition: .6s;
}
.bento-menu span:nth-child(5){
	top: 88px;
	left: 88px;
	transition: .6s;
}
.bento-menu span:nth-child(6){
	top: 88px;
	left:175px;
	transition: .6s;
}
.bento-menu span:nth-child(7){
	top: 175px;
	left: 0;
	transition: .6s;
}
.bento-menu span:nth-child(8){
	top: 175px;
	left: 88px;
	transition: .6s;
}
.bento-menu span:nth-child(9){
	top: 175px;
	left:175px;
	transition: .6s;
}
.bento-menu:hover span:nth-child(1){
	transform: translate(88px,88px);
}
.bento-menu:hover span:nth-child(3){
	transform: translate(-88px,88px);
}
.bento-menu:hover span:nth-child(7){
	transform: translate(88px,-88px);
}
.bento-menu:hover span:nth-child(9){
	transform: translate(-88px,-88px);
}
.bento-menu:hover span:nth-child(2){
	transform: rotate(180deg);
}
.bento-menu:hover span:nth-child(4){
	transform: rotate(180deg);
}
.bento-menu:hover span:nth-child(6){
	transform: rotate(-180deg);
}
.bento-menu:hover span:nth-child(8){
	transform: rotate(-180deg);
}

/*============================================================*/

.kebab-menu{
	width: 250px;
	height: 250px;
	position: absolute;
	top: 50%;
	left: 40%;
	transform: translateY(-50%);
}
.kebab-menu span{
	width: 70px;
	height: 70px;
	border-radius: 50%;
	background: #fff;
	position: absolute;
}
.kebab-menu span:nth-child(1){
	top: 0px;
	left: 35%;
	transition: .6s;
}
.kebab-menu span:nth-child(2){
	top: 0px;
	left: 35%;
	transition: .6s;
}
.kebab-menu span:nth-child(3){
	top: 88px;
	left: 35%;
	transition: .6s;
}
.kebab-menu span:nth-child(4){
	top: 175px;
	left: 35%;
	transition: .6s;
}
.kebab-menu span:nth-child(5){
	top: 175px;
	left: 35%;
	transition: .6s;
}
.kebab-menu:hover span:nth-child(1){
	transform: translate(70px,15px);
}
.kebab-menu:hover span:nth-child(2){
	transform: translate(-70px,15px);
}
.kebab-menu:hover span:nth-child(4){
	transform: translate(-70px,-15px);
}
.kebab-menu:hover span:nth-child(5){
	transform: translate(70px,-15px);
}


/*============================================================*/

.meatball-menu{
	width: 250px;
	height: 250px;
	position: absolute;
	top: 50%;
	left: 70%;
	transform: translateY(-50%);
}
.meatball-menu span{
	width: 70px;
	height: 70px;
	border-radius: 50%;
	background: #fff;
	position: absolute;
}
.meatball-menu span:nth-child(1){
	top:35%;
	left: 0%;
	transition: .6s;
}
.meatball-menu span:nth-child(2){
	top: 35%;
	left: 35%;
}
.meatball-menu span:nth-child(3){
	top: 35%;
	left: 72%;
	transition: .6s;
}
.meatball-menu:hover span:nth-child(1){
	transform: translate(15px,-85px);
}
.meatball-menu:hover span:nth-child(3){
	transform: translate(-15px,85px);
}


p{
	position: absolute;
	top: 270px;
	width: 200px;
	text-align: center;
	left: 20px;
	color: darkorange;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.