CSS3 전환 + 변환

수다왕

프로필 보기 이 회원 글보기 이 회원의 댓글보기

· 8년 전 · 조회 2009 2009

CSS3 전환 + 변환

다음 예제에서는 전환 효과에 변형을 추가합니다.

예

div {

-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */

transition: width 2s, height 2s, transform 2s;

}

<!DOCTYPE html>

<html>

<head>

<style>

div {

width: 100px;

height: 100px;

background: red;

-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */

transition: width 2s, height 2s, transform 2s;

}

div:hover {

width: 300px;

height: 300px;

-webkit-transform: rotate(180deg); /* Safari */

transform: rotate(180deg);

}

</style>

</head>

<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<p>Hover over the div element above, to see the transition effect.</p>

</body>

</html>

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시판 목록

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

글쓰기

번호	분류	제목	글쓴이	날짜	조회
917	CSS	Word Spacing 단어 간격	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1899
916	CSS	Text Direction 텍스트 방향	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1992
915	CSS	Line Height 라인 높이	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2007
914	CSS	Letter Spacing 글자 간격 [1]	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2927
913	CSS	Text Indentation 텍스트 들여 쓰기	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1952
912	CSS	텍스트 변환 Text Transformation	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2015
911	CSS	텍스트 방향 Text Direction	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1988
910	CSS	라인 높이 Line Height	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1861
909	HTML	글자 간격 Letter Spacing	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2291
908	CSS	text-indent	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2219
907	CSS	text-transform	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2054
906	CSS	text-decoration	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2309
905	CSS	Text Alignment	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2044
904	CSS	Text Color	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1834
903	CSS	Outline - Shorthand property	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1966
902	CSS	Outline Width	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2180
901	CSS	Outline Color	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2061
900	CSS	CSS Outline	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2496
899	CSS	CSS Box Model	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2472
898	CSS	Setting max-width	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2046
897	CSS	CSS Height and Width	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1672
896	CSS	CSS Padding	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2321
895	CSS	CSS Margins	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2000
894	CSS	CSS Border Properties	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2616
893	CSS	CSS Syntax and Selectors	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	1980
892	HTML	The HTML <audio> Element	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2063
891	HTML	HTML <video> 요소 [1]	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2533
890	HTML	html google map	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2619
889	HTML	SVG와 캔버스의 차이점	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	3722
888	HTML	SVG Logo	컴프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	8년 전	2161