상자 만들기
<body>
<section>
<article>
<div></div>
</article>
<article>
<div></div>
</article>
<article>
<div></div>
</article>
<article>
<div></div>
</article>
</section>
</body>
스타일
- transform: 회전
- perspective: 3차원 효과
- transform-origin: 끝에 붙이기
section {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
gap: 100px;
article{
border: 1px solid black;
width: 200px;
height: 200px;
perspective: 600px;
div{
width: 100%;
height: 100%;
background: blue;
opacity: 0.5;
}
&:nth-of-type(1){
div {
// y가 축이되어 회전
transform: rotateY(45deg);
}
}
&:nth-of-type(2){
div {
// X가 축이되어 회전
transform: rotateX(45deg);
}
}
&:nth-of-type(3){
div {
transform: rotateY(45deg);
transform-origin: left center;
}
}
&:nth-of-type(4){
div {
transform: rotateX(45deg);
transform-origin: top center;
}
}
}
}
회전 상자 만들기
<body>
<section class="frame">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<button class="prev">prev</button>
<button class="next">next</button>
</section>
</body>
main.js
const frame = document.querySelector(".frame");
const ul = frame.querySelector("ul");
const slides = frame.querySelectorAll("ul li");
const prev = frame.querySelector(".prev");
const next = frame.querySelector(".next");
prev.addEventListener("click", () => {
ul.append(ul.firstElementChild);
});
next.addEventListener("click", () => {
ul.prepend(ul.lastElementChild);
});
style.css
@use "reset";
body {
width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
.frame {
width: 700px;
height: 400px;
border: 1px solid black;
position: relative;
.prev {
position: absolute;
top: 50%;
left: 0px;
z-index: 3;
padding: 40px;
}
.next {
position: absolute;
top: 50%;
right: 0px;
z-index: 3;
padding: 40px;
}
ul {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
perspective: 1200px;
li {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: blue;
display: flex;
justify-content: center;
align-items: center;
font-size: 100px;
color: white;
opacity: 0.4;
transition: 0.5s;
&:nth-of-type(1) {
transform: translate(-1000px, 0px) rotateY(60deg);
opacity: 0.1;
}
&:nth-of-type(2) {
transform: translate(-500px, 0px) rotateY(40deg);
opacity: 0.4;
}
&:nth-of-type(3) {
transform: translate(0px, 0px) rotateY(0deg);
opacity: 0.7;
}
&:nth-of-type(4) {
transform: translate(500px, 0px) rotateY(-40deg);
opacity: 0.4;
}
&:nth-of-type(5) {
transform: translate(1000px, 0px) rotateY(-60deg);
opacity: 0.1;
}
}
}
}
}
Tags:
웹개발_교육