코드랩 레퍼런스

Hover Effect - Rotate 본문

SAMPLE

Hover Effect - Rotate

webstoryboy 2018. 2. 1. 21:43

See the Pen Hover Effect - Rotate by Webstoryboy (@webstoryboy) on CodePen.

가상의 박스를 만들고 회전시킨 상태에서 마우스 오버하면 이동시켜주는 애니메이션 이펙트 효과입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>hover-effect1.html</title>
	<style>
		*{padding: 0; margin: 0;}
		body {background:#1a237e}

		.box-wrap {
			width: 100vw;
			height: 100vh;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.box {
			position: relative;  
			margin:10px; 
			box-shadow: 1px 1px 3px rgba(0,0,0,0.3); 
			cursor: pointer; 
			overflow: hidden; 
			width:400px; height: 300px; 
			border:7px solid #283593;
		}
		.box img {
			width: 400px; display: block; 
			position: absolute; 
			z-index: 10;
			transform: translatey(0px)
			z-index: 30;
			transition: all 0.35s ease-in-out;
		}
		.box .info {
			opacity:0; visibility:visible; z-index: 50;
			position: absolute; left: 50%; top:50%; 
			transform: translate(-50%, -50%);
			color: #fff; 
			text-align: center;
			transition: all 0.35s ease-in-out; 
		}
		.box .info h3 {
			font-size:28px; padding-bottom: 3px;
		}
		.box:before{
			content: '';
			width: 500px; height: 500px; 
			background:rgba(0,0,0,0.7);
			position: absolute; z-index:40;
			top: 0; right: 0; left: auto;
			transform-origin: 100% 0;
			transform: rotate(52.5deg) translatex(-280px);
			transition: all 0.35s ease-in-out;
		}
		.box:after {
			content: '';
			width: 500px; height: 500px; 
			background:rgba(0,0,0,0.7);
			position: absolute; z-index:40;
			bottom: 0; right: 0; left: 0;
			transform-origin: 0 100%;
			transform: rotate(52.5deg) translatex(280px);
			transition: all 0.35s ease-in-out;
		}
		.box:hover .info {
			opacity:1; visibility: visible; 
		}
		.box:hover:before {
			transform: rotate(53.1deg) translatex(0px);
		}
		.box:hover:after {
			transform: rotate(53.1deg) translatex(0px);
		}
	</style>
</head>
<body>

	<div class="box-wrap">
		<div class="box">
			<div class="img"><img src="https://tistory4.daumcdn.net/tistory/2141493/skin/images/simg06.png" alt=""></div>
			<div class="info">
				<h3>Title</h3>
				<p>이미지 설명 부분입니다.</p>
			</div>
		</div>
	</div>

</body>
</html>


Share

Ad

Comments