편집 요약 없음 |
편집 요약 없음 |
||
| 32번째 줄: | 32번째 줄: | ||
.rotate:active{ | .rotate:active{ | ||
transform: rotate(70deg); | transform: rotate(70deg); | ||
animation: box-ani 1s linear forwards; | |||
} | } | ||
2023년 5월 20일 (토) 21:16 판
.losiacard {
display: inline-block;
overflow: hidden;
width: 190px;
height: 280px;
border-radius: 5px;
transform: scale(0.90);
transition: .2s ease-out;
}
.losiacard:hover{
transition: .2s ease-in;
transform: scale(0.995);
z-index:3;
margin-left: auto;
margin-right: auto;
}
.losiacard img {
display: inline-block;
overflow: hidden;
width: 190px;
height: 280px;
border-radius: 5px;
transform: scale(0.90);
transition: .2s ease-out;
}
.rotate{
transition: transform 2s;
}
.rotate:active{
transform: rotate(70deg);
animation: box-ani 1s linear forwards;
}
@keyframes box-ani {
from {
transform: translate(0px, 0px);
}
to {
transform: translate(0px, 100px);
}
}
.box {
display: flex;
align-items: center;
justify-content: center;
width: 100%
}