aside {
    width: 80px;
    height: 400px;
    position: fixed;
    top: 350px;
    right: -80px;
    background: #1c70b8;
    z-index: 1111;
}

aside ul {
    margin: 0;
    padding: 0;
}

aside ul li {
    height: 80px;
    margin: 0;
    list-style: none;
    color: rgba(218, 218, 218,1);
    border-bottom: 1px solid #555;
    transition: all 300ms;
    perspective: 800px;
    margin-bottom: 10px;
}

aside ul li a {
    position: relative;
}

aside ul li a .ud_menu_icon {
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    z-index: 2;
    background: #1c70b8;
    /* border-bottom: 5px solid #fff; */
    border-radius: 10px 0 0 10px;
}

aside ul li a .ud_menu_icon i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 300ms cubic-bezier(0.42, 0, 0.2, 1.69);
    color:#fff;
    font-size: 1.4em;
}

aside ul li a .ud_menu_name {
    position: absolute;
    right: 80px;
    top: 0;
    z-index: 1;
    transform-style: preserve-3d;
    transform-origin: 0 0;
    transform: rotate3d(0, 1, 0, 90deg);
    padding: 29px 35px 27px 35px;
    background-color: #1c70b8;
    border-left: 1px solid #555;
    transition: all 600ms cubic-bezier(0.42, 0, 0.2, 1.69);
    color: #fff;
}

aside ul li:hover>a .ud_menu_name {
    transform: rotate3d(0, 1, 0, 0deg);
    background-color: #1c70b8;
}

aside ul li:hover>a .ud_menu_icon i {
    transform: scale(1.5) translate(-50%, -50%);
    color: #fff;
}

@media only screen and (min-width: 1220px) {}
    
@media only screen and ( max-width: 420px ) {
    aside {top: 150px;}
    aside ul li {height: 35px;}
    aside ul li a .ud_menu_name {position: absolute; right: 40px; padding: 8px 15px;}
    aside ul li a .ud_menu_icon {width: 40px; height: 40px;}
    aside ul li a .ud_menu_icon i {font-size: 1.2em;}
    aside ul li:hover>a .ud_menu_icon i {transform: scale(1.1) translate(-50%, -50%);}
}

@media only screen and (min-width: 421px) and (max-width: 1024px) {
    aside {top: 150px;}
    aside ul li {height: 35px;}
    aside ul li a .ud_menu_name {position: absolute; right: 40px; padding: 8px 15px;}
    aside ul li a .ud_menu_icon {width: 40px; height: 40px;}
    aside ul li a .ud_menu_icon i {font-size: 1.2em;}
    aside ul li:hover>a .ud_menu_icon i {transform: scale(1.1) translate(-50%, -50%);}
}