집 > 기사 > 웹 프론트엔드 > CSS3를 사용하여 3D 뒤집기 책 효과를 얻는 방법

CSS3를 사용하여 3D 뒤집기 책 효과를 얻는 방법

不言원래의: 2018-06-25 16:56:133253검색

이 글에서는 CSS3에서 구현한 3D 뒤집기 책 효과를 주로 소개합니다. 새로운 CSS3 속성인 애니메이션과 변환을 기반으로 비슷한 뒤집기 책 효과를 구현한 것이므로 관심 있는 친구들이 참고할 수 있습니다. 렌더링: ( 스타일이 약간 보기 흉합니다. 무시해도 됩니다. 효과는 좋을 것입니다. 나중에 쉽게 변경할 수 있도록 다른 프로젝트에 추가할 수 있습니다. 0.0)

책을 넘기는 효과와 비슷합니다. 원래 의미는 JS를 사용하여 한 번 클릭한 후 setInterval을 사용하여 책 페이지가 뒤집히는 애니메이션을 제어하려면 책 페이지가 180° 회전할 때 setInterval을 지우지만 계속 클릭하면 책 페이지가 180° 회전하지 않으면 이전 작업을 계속 완료할 수 없습니다. setInterval을 지우는 방법을 사용할 수 있지만 항상 애니메이션 효과가 좋지 않다는 느낌이 듭니다. 물론 다른 해결 방법도 있지만 갑자기 발생합니다. CSS3가 애니메이션을 제공한다는 생각이 들었습니다. 애니메이션 애니메이션을 추가하면 이 문제를 직접 피할 수 있습니다. 애니메이션은 매번 실행되므로 연결된 점이 나타나면 아래의 코드와 구현 단계를 붙여넣으면 각 페이지가 자연스럽게 전환됩니다.

참고: 이 예제의 JS 부분은 네이티브 JS로 작성되었습니다. 네이티브 JS를 잘 사용하지 못하는 경우 jQuery를 사용할 수 있습니다. 및 기타 타사 프레임워크를 사용하여 다시 작성합니다.

html 부분: (이 부분은 진심입니다... 잊어버리세요. 그냥 추하게 만들어 보세요~.~)

<body>
    <!-- 所展示的书的内容 -->
    <p class="book">
        <p class="page">
            <span>1</span>
            <span>2</span>
        </p>
        <p class="page">
            <span>3</span>
            <span>4</span>
        </p>
        <p class="page">
            <span>5</span>
            <span>6</span>
        </p>
        <p class="page">
            <span>7</span>
            <span>8</span>
        </p>
        <p class="page">
            <span>9</span>
            <span>10</span>
        </p>
        <p class="page">
            <span>11</span>
            <span>12</span>
        </p>
        <p class="page">
            <span>13</span>
            <span>14</span>
        </p>
        <p class="page">
            <span>15</span>
            <span>16</span>
        </p>
        <p class="page">
            <span>17</span>
            <span>18</span>
        </p>
        <p class="page">
            <span>19</span>
            <span>20</span>
        </p>
    </p>
    <!-- 用来控制上一页和下一页操作 -->
    <input type="button" value="上一页" id="before"/>
    <input type="button" value="下一页" id="after"/>
</body>

CSS 부분: (변환에서 회전 값을 변경하여, 책 페이지 넘기기 효과 구현)

<style>   
        .book{   
            width: 460px;   
            height: 300px;   
            position: relative;   
            margin: 150px 400px;   
            -webkit-transform-style: preserve-3d;   
            -moz-transform-style: preserve-3d;   
            -ms-transform-style: preserve-3d;   
            transform-style: preserve-3d;   
            transform: rotatex(30deg);   
        }   
        .page{   
            width: 230px;   
            height: 300px;   
            border: 1px solid #666;   
            position: absolute;   
            rightright: 0;   
            transform-origin: left;   
            transform-style: preserve-3d;   
            backface-visibility:hidden;   
            font-size: 60px;   
            text-align: center;   
            line-height: 300px;   
        }   
        .page span{   
            display: block;   
            width: 100%;   
            position: absolute;   
            background-color: #00FFFF;   
        }   
        .page span:nth-child(2){   
            transform: rotatey(-180deg);   
            backface-visibility:hidden;   
        }   
        /*以下两个动画可以只使用第一个，animation中有reverse，可以反向执行动画， 
            使用时需要在JS中点击上一页时添加改属性值*/
        /*翻书下一页的动画*/
        @keyframes page {   
            0%{   
                transform: rotatey(0deg);   
            }   
            100%{   
                transform: rotatey(-180deg);   
                z-index: 10;   
            }   
        }   
        /*翻书上一页的动画*/
        @keyframes page1 {   
            0%{   
                transform: rotatey(-180deg);   
                z-index: 10;   
            }   
            100%{   
                transform: rotatey(0deg);   
            }   
        }   
    </style>

JS 부분 (JS 부분은 주로 이전/다음 페이지 클릭 시 해당 p에 애니메이션 속성을 추가하는 부분을 구현합니다.)

<script>   
    var before = document.querySelector("#before");   
    var after = document.querySelector("#after");   
    var book = document.querySelector(".book");   
    var page = document.getElementsByClassName("page"); 7     rotate();   
    function rotate(){   
        var middle = 0;12         for(var z=0;z<book.children.length;z++){   
            page[z].style.zIndex = book.children.length-z;   
        }   
        after.onclick = function(){   
            if(middle != book.children.length){   
                page[middle].style.animation = "page 1.5s linear 1 forwards";   
                middle++;   
            }else{   
                middle = book.children.length;   
            }   
        };   
        before.onclick = function(){   
            if(middle != 0){   
                page[middle-1].style.animation = "page1 1.5s linear 1 forwards";   
                middle--;   
        }else{   
            middle = 0;   
            }   
        }   
    }   
</script>

마지막 JS 부분에 대해서는, 주요 기능은 이전/다음 페이지 클릭 시 해당 p에 애니메이션 속성을 추가하는 것입니다. 애니메이션에 대한 자세한 설명은 API를 확인해야 합니다.

호환성 문제로 인해 여기서 더 나은 해결책은 애니메이션 대신 클래스를 추가하는 것입니다. 더 많은 브라우저에 적용하려면 -webkit-, -moz-······· 접두사를 추가해야 합니다. 이러한 것들을 클래스에 추가하고 클래스를 직접 추가하거나, 필요한 문자열을 직접 출력할 수 있도록 함수를 작성하고 캡슐화하면 됩니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

CSS3를 사용하여 3D 뒤집기 책 효과를 얻는 방법

관련 기사