jQuery 3D页面倾斜侧边菜单代码是一款jQuery基于css3属性制作点击按钮展开3D倾斜页面左侧导航菜单列表代码。
相关css3代码
main {
z-index: 0;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: flex;
align-items: center;
overflow: hidden;
background-color: #9DC6D1;
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
}
main:after {
content: '';
display: block;
position: absolute;
z-index: 1;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(33, 33, 45, 0.5));
visibility: hidden;
opacity: 0;
transition: opacity 150ms ease-out, visibility 0s 150ms;
}
main.menu-active {
border-radius: .001px;
-webkit-transform: translateX(16em) rotateY(15deg);
transform: translateX(16em) rotateY(15deg);
}
main.menu-active:after {
visibility: visible;
opacity: 1;
transition: opacity 150ms ease-out, visibility 0s;
}