본 게시글은 코딩웍스 HTML+CSS+JS 포트폴리오 실전 퍼블리싱을 참고하여 작성하였습니다.
<!doctype html>
<html lang="ko">
<head>
<title>앱 UI 3D 호버 이팩트 효과 만들기</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
body {display: flex; justify-content: center; align-items: center; height: 100vh;}
/*.container {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}*/
.appUi {position: relative; width: 340px; height: 640px; transform: rotate(-30deg) skewX(20deg);
background-color: #eee; box-shadow: 0 0 20px rgba(0,0,0,0.3); transition: .5s;}
.appUi:hover {box-shadow: -50px 100px 60px rgba(0,0,0,0.3);}
.appUi img {position: absolute; transition: .5s;}
.appUi:hover img:nth-child(1) {transform: translate(40px, -40px); opacity: 0.2;}
.appUi:hover img:nth-child(2) {transform: translate(80px, -80px); opacity: 0.4;}
.appUi:hover img:nth-child(3) {transform: translate(120px, -120px); opacity: 0.6;}
.appUi:hover img:nth-child(4) {transform: translate(160px, -160px);}
</style>
</head>
<body>
<div class="container">
<div class="appUi">
<img src="images/app-ui-01.jpg" alt="">
<img src="images/app-ui-02.jpg" alt="">
<img src="images/app-ui-03.jpg" alt="">
<img src="images/app-ui-04.jpg" alt="">
</div>
</div>
</body>
</html>
#1. img 기울이기
transform을 1개 이상 중복해서 사용할 경우 아래처럼 css를 적용해야 한다.
/*올바르지 않은 예 : 마지막에 있는 속성과 값이 덮어버림*/
.appUi {
transform: rotate(-30deg);
transform: skewX(20deg);
}
/*올바른 사용 예 : */
.appUi {
transform: rotate(-30deg) skewX(20deg);
}rotate만 지정했을 경우에는 img의 기울기가 부자연스럽기 때문에 skewX를 지정해준다.
#2. 마우스 hover되었을 때 카드의 움직임 상태 만들기
.appUi가 hover되었을 때 img가 순차적으로 움직여야 하기 때문에
.appUi:hover img:nth-child(1) {transform: translate(40px, -40px); opacity: 0.2;}
.appUi:hover img:nth-child(2) {transform: translate(80px, -80px); opacity: 0.4;}
.appUi:hover img:nth-child(3) {transform: translate(120px, -120px); opacity: 0.6;}
.appUi:hover img:nth-child(4) {transform: translate(160px, -160px);}간격은 40단위로 지정했고, opacity를 0.2단위로 지정해 하단의 카드로 내려갈 수록 흐려지게 했다.
#3. img 하단부 그림자 느낌 주기 (box-shadow)
.appUi자체에 box-shadow를 주어 바닥에 깔려있는 듯한 느낌을 주었다.
또한 transition되었을 때 그림자가 더 퍼진 듯한 느낌을 주었다.
box-shadow: 0 0 20px rgba(0,0,0,0.3);
/*X축 Y축 퍼짐정도(숫자커지면 더 크게 퍼진다) 색상*/
반응형
SMALL
'MarkUp > CSS' 카테고리의 다른 글
| [CSS] image-Map 이미지맵 만들기 (0) | 2022.01.05 |
|---|---|
| [CSS] hover했을 때 text가 위로 올라가는 네비게이션 만들기 (0) | 2022.01.05 |
| [CSS] before, after를 이용한 이펙트 만들어보기 (0) | 2022.01.04 |
| [CSS] 햄버거 메뉴 클릭시 X자 모양으로 바꾸기 (0) | 2022.01.02 |
| [CSS] position: sticky 에 대해 알아보자 (0) | 2021.12.22 |