-
질문 & 답변
카테고리
-
세부 분야
웹 개발
-
해결 여부
미해결
안녕하세요 아래질문과 같은현상이 있었습니다.
20.10.20 00:55 작성 조회수 152
0
저도 같은 현상이 있었습니다! 먼저 애니매이션이 적용되고 기준점이 옮겨졌습니다.
.box {
width: 100px;
height: 100px;
border: 2px solid black;
background: rgba(255, 255, 0, 0.7);
transition: 1s;
}
.box:hover{
transform-origin: left top;
transform: scale(2) rotate(15deg);
답변을 작성해보세요.
0
1분코딩
지식공유자2020.10.24
transform-origin을
.box:hover {} 에 넣는 대신 .box {}에 넣어주세요~
:hover는 마우스를 올렸을 때만 적용되는 것이라서
마우스를 빼면 효과도 사라져서 예상과 다른 동작이 될 수 있습니다.
특정 속성에만 transition을 적용하려면
transition: width 0.5s;
이런 식으로 해당 속성을 명시해주시면 됩니다.
0
이희은
질문자2020.10.20
그리고 마우스 호버시에 속성 변환에 트랜지션을 줄때, 한가지 속성 (예로들면 width와 컬러 두가지 속성이 있다면)에만 트랜지션을 주려면 어떻게 해야하나요?
답변 2