CSS3 - Transformations - 이미지 오버시 트랜지션 효과주는 방법

이미지를 가지고 transition 을 하는 방법이  있어 소개합니다.
마우스를 갖다대었을때 이미지가 변경이 되는 트랜지션을 알려드립니다. 먼저 앞에 보이는 이미지나 숫자가 있고(front), 뒤에 보이는 배경이(back) 있습니다.

처음에는 앞에 보이는 이미지가 보이고 마우스를 갖다 대었을때 뒤에 보이는 이미지가 보이는 형식입니다.
블로그에서 직접 시현하면서 보여드릴려고 클래스가 좀 복잡합니다.
이해해주시고 어떻에 적용되어지는지에 관심을 맞쳐서 보시기 바랍니다.

결과물이 어떤지 먼저 동영상을 보시고 글을 읽어주세요.


여기서는 -webkit 을 사용했습니다.
크로스 브라우징 코드를 만들어주는 사이트를 참고하세요. 
http://demun.tistory.com/2172 

먼저 소스는 아래와 같습니다. 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Transformations - demun</title>
<style>
	li.demunCode_li {
		width:200px;
		height:200px;
		float:left;
		list-style:none;
		margin-right:20px;
		margin-bottom:50px;
		background:red;
	}
</style>
</head>
<body>

<ul>
	<li class="demunCode_li">
		<div class="demunCode_front">1</div>
		<div class="demunCode_back">
			<img src="https://t1.daumcdn.net/cfile/tistory/15124B3950135ED833" alt="Transformations image"/>
		</div>
	</li>
</ul>

</body>
</html>
그럼 이렇게 보입니다.



이미지는 제가 블로그에 하나 업로드하고 해당 이미지주소를 사용했습니다.
li 안에 앞에 보이는 .demunCode_front 가 있고, 뒤에 보여지는 demunCode_back 가 있습니다.
그 안에 img 태그로 이미지가 있습니다.
여러개의 이미지를 사용해야 효과를 볼 수 있으므로 li를 복사해서 여러개를 만듭니다.
여기서는 총 4개를 만들어 보겠습니다.

<ul>
	<li class="demunCode_li">
		<div class="demunCode_front">1</div>
		<div class="demunCode_back">
			<img src="https://t1.daumcdn.net/cfile/tistory/15124B3950135ED833" alt="Transformations image"/>
		</div>
	</li>
	<li class="demunCode_li">
		<div class="demunCode_front">2</div>
		<div class="demunCode_back">
			<img src="https://t1.daumcdn.net/cfile/tistory/15124B3950135ED833" alt="Transformations image"/>
		</div>
	</li>
	<li class="demunCode_li">
		<div class="demunCode_front">3</div>
		<div class="demunCode_back">
			<img src="https://t1.daumcdn.net/cfile/tistory/15124B3950135ED833" alt="Transformations image"/>
		</div>
	</li>
</ul>

그럼 아래처럼 보여집니다.

 
.demunCode_front 에 숫자 1,2,3 이런식으로 숫자를 적었습니다. 
다음 li 다음에 오는 front 와 back 에 스타일을 설정합니다.
li 의 공간이 꽉차게 설정합니다.

li.demunCode_li {
	width:200px;
	height:200px;
	float:left;
	list-style:none;
	margin-right:20px;
	margin-bottom:50px;
	background:red;
	position:relative;
}
li.demunCode_li div {
	width:100%;
	height:100%;
	position:absolute;
}

li.demuCode_li div 에 position:absolute 를 줬기 때문에 부모에는 position:relative 를 줘야 벗어나지 않습니다.
그러니까 front 가 back 의 이미지에 가려 안보이게 됩니다. 즉 숫자가 안보입니다.


이제 숫자가 앞에 보이게 하기 위해 z-index 를 사용하고, 배경과 글씨크기를 줘서 이미지가 안보이도록 꽉차게 만듭니다.
.demunCode_front {
	z-index:3;
	color:black;
	text-align:center;
	line-height:200px;
	font-size:80px;
	background:#e5e5e5;
}
그럼 아래처럼 보입니다.


이제 hover 를 작성해보도록 하겠습니다.
위에서 .demunCode_front 에서 z-index:3 을 주었기 때문에 .demunCode_front:hover 에 z-index:0 으로 하면 뒤에 있는 back 가 보이는 형식입니다.


마우스를 오버할때 스타일이 적용되기 때문에 cursor:pointer 를 줘서 마우스가 손모양으로 바뀌게 했습니다.
 


이제 여기서 -webkit-transform 을 주고 rotateY(180deg) 을 주어 거꾸로 뒤집히는 효과를 줍니다.
아래코드처럼 li:hover 와 .demunCode_back 에 우선 효과를 줘서 마우스 오버시 뒤집어 보이도록 합니다.

li:hover .demunCode_front {
	z-index:0;
	-webkit-transform: rotateY(180deg);
}
.demunCode_back {
	-webkit-transform: rotateY(180deg);
}


마우스 오버시 이미지가 뒤집이는것이 보이지요.
문제는 여기서 끝이 아니라 이미지를 다시 원상 복구 시키는 것입니다.
그래서 li:hover .demunCode_back 에 rotateY(0deg) 를 줍니다.

li:hover .demunCode_back {
	-webkit-transform: rotateY(0deg);
}
여기까지 했다면 효과는 다 들어갔는데. 이것이 뒤집이는지 바로 보이는지 확인을 할 수가 없습니다.
그래서 li.demunCode_li div 에 -webkit-transition: all 1s; 를 추가해줍니다.
어떻게 변하는지 볼까요?



효과가 멋지게 들어가지요...단지 배경에 red 가 있는것이 걸리기 때문에 li.demunCode_li 에 background:red; 를 삭제하기만 하면 됩니다.



여기까지 기본적으로 효과는 끝이났습니다. 좀더 멋진효과는 아래의 글에서 계속 됩니다.

개    개