5
이 작업을 수행하고 싶습니다 : -webkit-transform: translateX(300px)
왼쪽에서 원점을 갖는 대신 오른쪽에서.
-webkit-transform-origin: 100% 100%
및 심지어 top right
을 시도했지만 영향을주지 않았습니다.CSS3 변형 : translateX 해당 사항이
할 방법이 있습니까? CSS의 힘으로
이 작업을 수행하고 싶습니다 : -webkit-transform: translateX(300px)
왼쪽에서 원점을 갖는 대신 오른쪽에서.
-webkit-transform-origin: 100% 100%
및 심지어 top right
을 시도했지만 영향을주지 않았습니다.CSS3 변형 : translateX 해당 사항이
할 방법이 있습니까? CSS의 힘으로
:
body {
padding: 0;
margin: 0;
}
#page {
position: absolute;
width: 100%;
height: 100%;
background-color: black;
z-index:2;
right:0;
}
#left_drawer {
background-color: #222222;
position: absolute;
top: 0;
right: 0;
width: 300px;
height: 100%;
z-index: 1;
}
#toggle {
width: 50px;
height: 50px;
background-color: red;
float: right;
}
.open_drawer {
-webkit-animation: open_drawer 300ms ease-in-out;
-webkit-animation-fill-mode: forwards;
-webkit-transform: translateX(0);
}
@-webkit-keyframes open_drawer {
to {
-webkit-transform: translateX(-300px);
}
}
이것은 오른쪽에서 밀어 만들 것입니다. Fiddle.