[NOJS] 3D 캐러셀 슬라이드 만들기
2020. 12. 13. 18:28ㆍJavascript/응용
1. 완성본
2. 설명
CSS로 3D를 만져보는것이 익숙하지 않아 꽤나 애먹었다. HTML 구조는 다음과 같다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D 이미지 슬라이드 쇼</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<section class="slideshow">
<div class="content">
<div class="content-carrousel">
<div class="content-carrousel__item"></div>
<div class="content-carrousel__item"></div>
<div class="content-carrousel__item"></div>
<div class="content-carrousel__item"></div>
<div class="content-carrousel__item"></div>
<div class="content-carrousel__item"></div>
</div>
</div>
</section>
</body>
</html>
CSS 코드 중에 content 클래스안에 있는 내용을 주목할 필요가 있다. prospective는 3차원 위치 관점을 제공하기 위해, Z=0인 평면과 사용자 사이의 거리를 결정한다. 쉽게 말하면 원근법을 제공한다는 뜻이다. 값은 무조건 0, 양수 값이어야 한다. 그리고 padding-top 속성 값을 변화시켜 줄 때마다 위에서 보는 관점의 변화가 생겼는데, 왜 그런지는 모르겠다. 나머지는 읽어보면 어떤식으로 돌아가는지 이해할 수 있을 것이다.
*{
box-sizing: border-box;
}
html{
font: 10px;
}
body{
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
}
.slideshow{
height: 100%;
background: rgba(0, 184, 148,1.0);
position: relative;
}
.content{
position: absolute;
top: 35%;
left: 47%;
transform: translate(-35%, -50%);
width: 190px;
perspective: 900px;
padding-top: 80px;
position: relative;
}
.content-carrousel{
width: 100%;
position: absoulte;
transform-style: preserve-3d;
animation: rotateslide 15s infinite linear;
}
.content-carrousel:hover{
animation-play-state: paused;
cursor: pointer;
}
.content-carrousel .content-carrousel__item{
width: 100%;
height: 120px;
transform: rotate(-3deg);
box-shadow: 0px 0px 20px 0px #000;
overflow: hidden;
position: absolute;
}
.content-carrousel .content-carrousel__item:nth-child(1){
background-color:#f9ca24;
transform: rotateY(0deg) translateZ(230px);
}
.content-carrousel .content-carrousel__item:nth-child(2){
background-color: #ffbe76;
transform: translateX(-5px) rotateY(60deg) translateZ(230px);
}
.content-carrousel .content-carrousel__item:nth-child(3){
background-color: #ff7979;
transform: rotateY(120deg) translateZ(230px);
}
.content-carrousel .content-carrousel__item:nth-child(4){
background-color: #22a6b3;
transform: rotateY(180deg) translateZ(230px);
}
.content-carrousel .content-carrousel__item:nth-child(5){
background-color: #be2edd;
transform: rotateY(240deg) translateZ(230px);
}
.content-carrousel .content-carrousel__item:nth-child(6){
background-color: #4834d4;
transform: rotateY(300deg) translateZ(230px);
}
@keyframes rotateslide{
from{
transform: rotateY(0deg);
}
to{
transform: rotateY(360deg);
}
}
3. 참고자료
'Javascript > 응용' 카테고리의 다른 글
| [JS] 바닐라 자바스크립트를 이용하여 Rich-Text-Editor 만들기 (0) | 2021.01.18 |
|---|---|
| [JS] 마우스 Drog & Drop을 이용하여 박스를 이동시켜보자. (0) | 2021.01.04 |
| [JS] 반응형 네비게이션 바 만들기 (2) | 2020.06.16 |
| [JS] 계산기 만들기 (0) | 2020.06.14 |
| [JS] 자바스크립트로 아날로그 시계 만들기 (0) | 2020.06.07 |