Heim > Artikel > Web-Frontend > So erzielen Sie mit CSS3 einen 3D-Flipbook-Effekt

So erzielen Sie mit CSS3 einen 3D-Flipbook-Effekt

不言Original: 2018-06-25 16:56:133198Durchsuche

In diesem Artikel wird hauptsächlich der durch CSS3 erzielte 3D-Flipbook-Effekt vorgestellt. Er basiert auf den neuen CSS3-Eigenschaften Animation und Transformation, um einen ähnlichen Flipbook-Effekt zu erzielen.

Beginnen wir mit den Renderings: (Der Stil ist etwas hässlich, Sie können ihn ignorieren und es wird in Ordnung sein, sobald der Effekt auftritt. Sie können ihn später zu anderen Projekten hinzufügen, um 0,0 einfach zu ändern)

Ähnlich wie beim Umdrehen eines Buches besteht die ursprüngliche Bedeutung darin, JS zur Steuerung zu verwenden. Nach einem Klick wird setInterval verwendet, um die Animation der Buchseite zu steuern Wenn ich jedoch kontinuierlich klicke, werden die Buchseiten, die zuvor nicht um 180 ° gedreht wurden, gelöscht. Wenn Sie die vorherige Aktion nicht fortsetzen können, können Sie die Methode zum Löschen von setInterval verwenden, aber ich Ich habe immer das Gefühl, dass der Animationseffekt nicht gut ist, aber mir ist plötzlich aufgefallen, dass wir durch das Hinzufügen von Animationsanimationen dieses Problem vermeiden können Die Animationsanimation soll die Animation jedes Mal vervollständigen, wenn verbundene Punkte angezeigt werden, wie im Bild unten gezeigt. Fügen Sie den Code und die Implementierungsschritte ein:
Hinweis: Der JS-Teil dieses Beispiels ist geschrieben in nativem JS. Wenn Sie nicht gut in der Verwendung von nativem JS sind, können Sie jQuery und andere Frameworks von Drittanbietern verwenden, um den
HTML-Teil neu zu schreiben: (Dieser Teil ist aufrichtig... ·, vergessen Sie es, seien Sie einfach hässlich~ .~)

<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-Teil: (Durch Ändern des Werts von rotationy in transform wird der Umdrehungseffekt der Buchseite erreicht)

<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-Teil (der JS-Teil implementiert hauptsächlich das Hinzufügen von Animationsattributen zum entsprechenden p, wenn auf die vorherige/nächste Seite geklickt wird)

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

Über den letzten JS-Teil: Die Hauptfunktion besteht darin, Fügen Sie dem entsprechenden p Animationsattribute hinzu, wenn Sie auf die vorherige/nächste Seite klicken. Für eine detaillierte Erklärung der Animation müssen Sie noch die API überprüfen.

Aufgrund von Kompatibilitätsproblemen besteht eine bessere Lösung darin, Klasse statt Animation hinzuzufügen. Um sich an mehr Browser anzupassen, müssen Sie die Präfixe -webkit-, -moz-···· ·· hinzufügen. · Schreiben Sie diese Dinge also in eine Klasse und fügen Sie die Klasse direkt hinzu, oder schreiben Sie eine Funktion, kapseln Sie sie und geben Sie die erforderliche Zeichenfolge direkt aus.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

js und CSS3, um den Kartenrotationswechseleffekt zu erzielen

Einführung in die Verwendung der CSS3-3D-Rotation Rotationseffekt

Das obige ist der detaillierte Inhalt vonSo erzielen Sie mit CSS3 einen 3D-Flipbook-Effekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php jquery css css3 html webkit 封装字符串 class JS transform animation

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Verwenden Sie Javascript, um den Effekt zu erzielen, dass Bilder nach links und rechts verschoben werdenNächster Artikel：Verwenden Sie Javascript, um den Effekt zu erzielen, dass Bilder nach links und rechts verschoben werden

In Verbindung stehende Artikel

Mehr sehen