728x90
반응형
원근감을 이용한 회전효과
html 골격만들기
>css
figure라는 공통된 태그를 넣어주면 명령어를 줄여서 쓸수 있다.
● perspective : 투시점 , 부모에게 적용해야함
left 가 기준점(relative)이고
figcaption 수정하기
figcaption에 translateZ를 추가해서 이미지와 피그캡션을 z축으로 띄어준다.
left 이미지 효과주기
.front , .back 에 transform-style 넣어준다,
● transform-style : preserve-3d > 3d로 사용하겠다.
아래에 #wrap .left .front{} 하나 더 만들어준다.
transform: rotateY / 시간값 / backface-visibility: hidden 적용
#wrap .left:hover .front{}
left에 hover 시에 Y축으로 180도 회전되도록 한다.
<html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>원근감을 이용한 회전</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div id="wrap">
<div class="left effect">
<figure class="front">
<img src="./img/img01.png" alt="거실이미지">
<figcaption>
<h3>왼쪽이미지 앞면입니다.</h3>
</figcaption>
</figure>
<figure class="back">
<img src="./img/img02.png" alt="거실이미지2">
<figcaption>
<h3>왼쪽이미지 뒷면입니다.</h3>
</figcaption>
</figure>
</div>
<div class="right effect">
<figure class="front">
<img src="./img/img03.png" alt="식물이미지1">
<figcaption>
<h3>오른쪽 이미지 앞면입니다.</h3>
</figcaption>
</figure>
<figure class="back">
<img src="./img/img04.png" alt="식물이미지2">
<figcaption>
<h3>오른쪽 이미지 뒷면입니다.</h3>
</figcaption>
</figure>
</div>
</div>
</body>
</html><css>
@charset "utf-8";
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
img{
display: block;
}
body{
height: 100vh;
background-color: #0f2027;
}
#wrap{
height: 100vh;
/* 세로가운데 정렬하기 위해서는 높이값이 있어야함 */
display: flex;
align-items: center;
justify-content: center;
}
#wrap .left{
width: 400px;
height: 300px;
margin: 10px;
/* 투시점 : 부모에게 주어야한다.*/
perspective: 1000px;
position: relative;
}
#wrap .left .front{
position: absolute;
left:0;
top: 0;
z-index: 10;
transform-style: preserve-3d;
/* 3d로 사용을 하겠다 */
/* display: none; */
}
#wrap .left .back{
position: absolute;
left:0;
top: 0;
z-index: 9;
transform-style: preserve-3d;
/* 3d로 사용을 하겠다 */
}
/* figure에 넣어주면 front, back 동시에 명령이 적용된다 */
#wrap .left figure img{
width: 100%;
}
#wrap .left figure figcaption{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%) translateZ(100px);
/* translateZ 원근감 주기 */
background-color: rgba(255,255,255,0.3);
padding: 20px;
backface-visibility: hidden;
}
#wrap .left figure figcaption h3{
font-size: 24px;
white-space: nowrap;
/* 한줄에 글자가 가게 함 */
}
/* 왼쪽이미지 효과주기 */
#wrap .left .front{
transform: rotateY(0deg);
transition: all 5s;
backface-visibility: hidden;
}
#wrap .left:hover .front{
transform: rotateY(180deg);
}
#wrap .left .back{
transform: rotateY(-180deg);
transition: all 5s;
backface-visibility: hidden;
}
#wrap .left:hover .back{
transform: rotateY(0deg);
}
/* 오른쪽 이미지 */
#wrap .right{
height: 300px;
width: 400px;
margin: 10px;
position: relative;
perspective: 1000px;
/* 투시점 */
}
#wrap .right .front{
position: absolute;
left: 0;
top: 0;
transform-style: preserve-3d;
}
#wrap .right .back{
position: absolute;
left: 0;
top: 0;
transform-style: preserve-3d;
}
#wrap .right figure{
}
#wrap .right figure img{
width: 100%;
}
#wrap .right figure figcaption{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%) translateZ(100px);
background-color: rgba(255,255,255,0.3);
padding: 20px;
backface-visibility: hidden;
}
#wrap .right figure figcaption h3{
white-space: nowrap;
font-size: 24px;
}
#wrap .right .front{
transform: rotateX(0deg);
transition: all 1s;
backface-visibility: hidden;
}
#wrap .right:hover .front{
transform: rotateX(180deg);
}
#wrap .right .back{
transform: rotateX(-180deg);
transition: all 1s;
backface-visibility: hidden;
}
#wrap .right:hover .back{
transform: rotateX(0deg);
}728x90
반응형
'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글
| 비주얼 스튜디오 코드 32 _ 베지에곡선 사용하기 (0) | 2023.06.14 |
|---|---|
| 비주얼 스튜디오 코드 31_ 상하 / 좌우 슬라이드 배너 (0) | 2023.06.14 |
| 비주얼 스튜디오 코드 29 _ 마우스오버 효과 복습 (0) | 2023.06.14 |
| 비주얼 스튜디오 코드 28_ 상하 슬라이드 배너 만들기 (0) | 2023.06.13 |
| 비주얼 스튜디오 코드 27_ 태그 명령 줄여서 쓰기 , 반응형 (0) | 2023.06.13 |