-
211005_transform,hover,rocate,scale,translateJQuery 2021. 10. 5. 12:20
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<img alt="" src="../cat/cat1.JPG" width="200">
<img alt="" src="../cat/cat2.JPG" width="200">
<img alt="" src="../cat/cat3.JPG" width="200">
<img alt="" src="../cat/cat4.JPG" width="200">
<script type="text/javascript">
//1번째 이미지 hover
$("img:eq(0)").hover(function() {
//45 회전..angle은 각크기, 단위는 deg,rad,grad,turn(1회전=360deg)
$(this).css("transform", "rotate(180deg)");
}, function() {
$(this).css("transform", "rotate(0deg)");
})
//2번째 이미지에 -45도 회전했다가 제자리
$("img:eq(1)").hover(function() {
$(this).css("transform", "rotate(-45deg)");
}, function() {
$(this).css("transform", "rotate(0deg)");
});
//3번째 이미지 가로세로 2배 확대했다 다시 제자리
//scale요소로 확대,축소 가능..1보다 큰수는 확대, 작은 수는 축소
$("img:eq(2)").hover(function() {
$(this).css("transform", "scale(2,2)");
}, function() {
$(this).css("transform", "scale(1,1)");
});
//translateX(50px): 오른쪽으로 50px 이동, 만약 음수 지정하면 왼쪽이동
$("img:eq(3)").hover(function() {
$(this).css("transform", "translate(50px,50px)"); //translate: X,Y값 동시 이동
}, function() {
$(this).css("transform", "translate(0px,0px)");
});
</script>
</body>
</html>
'JQuery' 카테고리의 다른 글
211005_fadeto (0) 2021.10.05 211005_siblings (0) 2021.10.05 211005_form,change,click (0) 2021.10.05 211005_form,table,button (0) 2021.10.05 211001_each,append,after (0) 2021.10.01