html 向左滑动面板 - 仅限CSS

Posted 2021-05-11

.show {
  transform: translate3d(200%, 0, 0);
  -webkit-transform: translate3d(200%, 0, 0);
}
	
.left-slide-menu {
  -moz-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  position: absolute;
  top: 0;
  left: -200%;
  width: 100%;
  z-index: 9999;
}

<!-- toggling class "show" for the following div will trigger the animation -->
<div id="sample" class="left-slide-menu"></div>