:root{
    --blue: #008EFA;
    --pink: #FF207A;
    --bg: #EEEEEE;
    --white: #FEFEFE;
}
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background-color: var(--bg);
	
	
}
.main{
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 300px;
    height: 200px;
    position: relative;
}
.menu{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 300px;
    height: 100px;
    padding: 30px;

    border-radius: 5px;
    box-shadow: 0 0 5px 1px rgba(0,0,0,.05);
    background-color: var(--white);
}
.menu__trigger{
    position: absolute;
    top: 50px;
    left: calc(50% - 50px);
    width: 100px;
    height: 100px;
    background-color: var(--blue);
    border: 10px solid var(--bg);
    border-radius: 50%;
    padding: 20px;
    cursor: pointer;
    transition: .35s ease;
}
.menu__base{
    width: 20px;
    height: 20px;
    object-fit: contain;
    opacity: .7;
}
.menu__item{
    position: absolute;
    width: 60px;
    height: 60px;
    top: 70px;
    padding: 20px;
    border-radius: 50%;


    background-color: var(--white);
    border: none;
    box-shadow: 0 0 5px 1px rgba(0,0,0,.05);
    z-index: -1000;
    opacity: 0;
}
.menu__item--0{ transition: .35s ease; left: calc(50% - 30px);}
.menu__item--1{ transition: .35s ease .1s; left: calc(50% - 30px);}
.menu__item--2{ transition: .35s ease .2s; right: calc(50% - 30px);}

.is-rotate {
    transform: rotateZ(225deg);
    background-color: var(--pink);
}
.item-0 { top: 20px; left: calc(50% - 110px); opacity: 1;}
.item-1 { top: -25px; left: calc(50% - 30px); opacity: 1;}
.item-2 { top: 20px; right: calc(50% - 110px); opacity: 1;}