console
$(function(){
$('.c_menu').off().on('click',function(){
if($(this).attr('state')=='off'){
$('.panel_3d').css('transform','rotateY(0deg)');
$(this).attr('state','on');
}else{
$('.panel_3d').css('transform','rotateY(90deg)');
$(this).attr('state','off');
}
})
})
<div class="c_menu" state="off"><span>菜单</span></div>
<div class="stage">
<div class="panel_3d"></div>
</div>
body{
background-color:#fff;
margin:0;
padding:0;
user-select:none;
}
.c_menu{
background-color: #ccc;
height: 150px;
width: 30px;
text-align: center;
position: fixed;
top: 50px;
left: -25px;
border-radius: 0 30px 30px 0;
display: flex;
align-items: center;
cursor: pointer;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
z-index:10;
}
.c_menu:hover{
left: 0;
}
.c_menu span{
}
.stage{
perspective: 800px;
width:300px;
height:200px;
position:fixed;
top:50px;
left:5px;
perspective-origin: left center;
}
.panel_3d{
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
background-color:rgba(0, 208, 255, 0.52);
width:300px;
height:200px;
position: fixed;
top:0;
left:0;
border-radius:3px;
transform: rotateY(90deg);
transform-origin: left center;
}