<section class="app" id="app" data-current-media="book">
<h1 class="title">3D cover (CSS)</h1>
<article class="media-container">
<div class="book-wrapper">
<div class="book">
<div class="book__front">
<img src="https://images-na.ssl-images-amazon.com/images/I/91-j2UzZW4L.jpg" alt="cover">
</div>
<div class="book__paper"></div>
<div class="book__back"></div>
</div>
<div class="book-shadow"></div>
</div>
<div class="movie-wrapper">
<div class="movie">
<div class="movie__front">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/184729/2019-Annihilation-DVD-and-Bluray-Cover-UK-and-USA-CST1.jpg" alt="cover">
</div>
<div class="movie__edge"></div>
<div class="movie__side"></div>
</div>
<div class="movie-shadow"></div>
</div>
</article>
<div class="media-buttons" id="media-buttons">
<button class="media__button" value="book">Book</button>
<button class="media__button" value="movie">Movie</button>
</div>
<div class="controls">
<div class="controls__thickness">
<p>Book thickness: <span id="thickness-output">?</span></p>
<input id="thickness" type="range" min="1" max="80" step="1" value="40">
</div>
</div>
</section>
/**
* App component
*/
.app {
--thickness: 40px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: calc(100% - 8vmin);
height: calc(100vh - 8vmin);
margin: 4vmin;
padding-bottom: 40px;
background: linear-gradient(to right, #56ab2f, #a8e063);
border-radius: 10px;
overflow: hidden;
perspective: 1500px;
&[data-current-media="book"] {
background: linear-gradient(to right, #56ab2f, #a8e063);
.book-wrapper {
display: block;
}
.media__button[value="book"] {
color: black;
}
}
&[data-current-media="movie"] {
background: linear-gradient(to right, #2196F3, #03A9F4);
.movie-wrapper {
display: block;
}
.media__button[value="movie"] {
color: black;
}
.controls__thickness {
display: none;
}
}
}
/**
* Title
*/
.title {
position: absolute;
top: 0;
display: block;
width: 100%;
font-family: 'Josefin Sans';
padding: 5vmin;
font-size: 30px;
color: #fbfffc;
z-index: 1;
}
.
.
.
/**
* DOM refrences
*/
const app = document.getElementById("app");
const thickness = document.getElementById("thickness");
const thicknessOutput = document.getElementById("thickness-output");
const bookWrapper = document.getElementById("book-wrapper");
const movieWrapper = document.getElementById("movie-wrapper");
const mediaButtons = document.getElementById("media-buttons");
thicknessOutput.innerHTML = thickness.value;
/**
* Attach event handlers
*/
thickness.oninput = function() {
thicknessOutput.innerHTML = this.value;
app.style.setProperty("--thickness", `${this.value}px`);
}
mediaButtons.addEventListener("click", e => {
if (!e.target.value) { return; }
app.setAttribute("data-current-media", e.target.value)
});
해당 사이트로 이동하거나 첨부파일을 다운로드하여
전체 소스를 확인하실 수 있습니다.
