프로그래밍/신나는 웹프로그래밍 썸네일형 리스트형 [CSS3] transform:rotate를 이용한 이미지 회전 이번 시간은 주사위에 마우스를 갖다 놓으면 주사위가 일정한 시간에 걸쳐 45도,130도 회전하는 것을 실습해 보도록 하겠습니다. [관련 동영상] [소스 코드] (가) 이미지 요소에 넓이와 높이 설정, 전환 효과 설정 img { width : 100px; height : 100px; transition : transform 1s // 0에서 130도까지 1초간 변경 } (나) 이미지 요소에 넓이와 높이 설정, 전환 효과 설정 img:hover { transform:rotate(130deg); // 130도 회전 } (다) 이미지 삽입 src부분에는 해당하는 이미지 파일이나 이미지가 있는 위치를 넣어주면 된다. 더보기 [CSS3] 이미지 3초간 변경하기(확대)- transition 이번 시간은 주사위 이미지에 마우스를 갖다 놓으면 주사위가 3초간 세배 확대되는 CSS3를 넣어보도록 하겠습니다. 여기서 아시겠지만 이미지 파일이 필요합니다. [결과 화면]이미지에 마우스를 올리면 이미지가 100px, 100px 크기엣 300px, 300px로 확대됩니다. [설명] (상세 설명)(가) 이미지 요소에 넓이와 높이 설정, 전환 효과 설정 img { width : 100px; // 넓이 100px 설정 height : 100px; // 높이 100px 설정 transition : width 3s, height 3s; // 전환 효과 3초간 변경 } (나) 이미지 요소에 넓이와 높이 설정, 전환 효과 설정 img:hover { // 마우스를 이미지 위에 올리면 width : 300px; // 넓.. 더보기 이전 1 다음
