CSS를 이용한 3D 북 애니메이션 3D book

CSS를 이용한 3D 북애니메이션입니다.

소스를 변경하여 다양하게 응용 가능합니다.

HTML 구조

<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">

                   

                </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">

                   

                </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>

 

 

CSS 소스(SCSS)

/**

 * 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;

}

 

.
.
.

 

JS 소스

/**

 * 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)

});

해당 사이트로 이동하거나 첨부파일을 다운로드하여
전체 소스를 확인하실 수 있습니다.