패스트캠퍼스 챌린지 21일차 - Part 1. 스타벅스 예제(9)

28. 3D 애니메이션

요소에 마우스를 hover하면 요소가 뒤집히며 뒷 내용이 나오는 애니메이션을 만들었다.

 

기본적인 3D 애니메이션 원리

.container {
	width: 100px;
	height: 100px;
	perspective: 300px; /* 3차원 느낌나게 */
}

.container .item {
	width: 100px;
	height: 100px;
	border: 4px solid red;
	box-sizing: border-box;
	font-size: 60px;
	backface-visibility: hidden; /* 뒤집혔을 때 안 보이게 */
	transition: 1s; /* 자연스러운 전환 효과 */
}

.container .item.front {
	position: absolute;
	transform: rotateY(0deg); /* 브라우저마다 다를 수 있기 때문에 명확히해줌 */
}

.container:hover .item.front {
	transform: rotateY(180deg);
}
.container:hover .item.back {
	transform: rotateY(180deg);
}

스타벅스 예제

/*RESERVE STORE*/
.reserve-store {
	background-image: url('../images/reserve_store_bg.jpg');
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed;
	background-size: cover;
}
.reserve-store .inner {
	height: 600px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.reserve-store .medal {
	width: 334px;
	height: 334px;
	perspective: 600px;
}
.reserve-store .medal .front,
.reserve-store .medal .back {
	width: inherit;
	height: inherit;
	position: absolute;
	transition: 1s;
	backface-visibility: hidden;
}
.reserve-store .medal .front {
	transform: rotateY(0deg);
}
.reserve-store .medal:hover .front {
	transform: rotateY(180deg);
}
.reserve-store .medal .back {
	transform: rotateY(-180deg);
}
.reserve-store .medal:hover .back {
	transform: rotateY(0deg);
}
.reserve-store .medal .back .btn {
	position: absolute;
	top: 240px;
	left: 0;
	right: 0;
	margin: auto; 
	/* 수평 가운데 배치 */
}

메달의 앞면, 뒷면이 표시된 모습

이렇게 회전하는 애니메이션이 보임

 

http://bit.ly/3Y34pE0

패스트캠퍼스 [직장인 실무교육]

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.