prac-26 transform & backface & 애니메이션 효과 & JS 이미지 변환

[문귀현]

※ 알아두어야 할 것

◈ CSS3 (Cascading Style Sheet)

기울임 효과

→ transform: skew(-25deg,-15deg);

기준점 정해주기

.rose {

transform: rotateZ(10deg);

}

.ltop .rose {

transform-origin: top left;

}

입체감 주기

#pers {

perspective: 300px; (수치가 적을수록 입체감 커짐)

}

x축으로 2.5, y축으로 1.2, z축으로 -1.5만큼의 방향 벡터로 45도 회전

.rotatexyz {

transform: rotate3d(2.5,1.2,-1.5,45deg);

}

#tr-style1 {

transform-style: flat; → 하위요소 평면 처리

}

#tr-style2 {

transform-style: preserve-3d; → 하위요소 3d효과 적용

}

뒷면 숨기기, 표시

#back1 {

backface-visibility: hidden;

}

#back2 {

backface-visibility: visible;

}

애니메이션 효과 주기

@keyframes bomb {

from {

font-size:500%; → 시작지점

}

to {

font-size:100%; → 종료지점

}

}

h3 {

animation-name: bomb; → 지정한 이름 부여

animation-duration: 3s; → 3초동안 지속

animation-iteration-count: infinite; → 무한 반복 (숫자값은 반복횟수)

}

transition-property: width,height; → 트랜지션 대상 설정

◈ JavaScript

-- 이미지 바꾸기 효과 --

<img src="img/spade-A.png" alt="이미지" xxxxxxonmouseover="this.src='img/spade-2.png'"

xxxxxxonmouseout="this.src='img/spade-A.png'">

여기에서 this는 이미지(자기자신)을 가리킨다.