ホームページ > 記事 > ウェブフロントエンド > CSS3 を使用して 3D のめくり本の効果を実現する方法
CSS3 を使用して 3D のめくり本の効果を実現する方法
- 不言オリジナル
- 2018-06-25 16:56:133255ブラウズ
この記事では、CSS3 の新しいプロパティであるアニメーションと変換に基づいて、同様のフリップブック効果を実現します。興味のある方は参考にしてください。 、レンダリング: (スタイルは少し醜いですが、無視できます。効果は良好です。変更を容易にするために後で他のプロジェクトに追加されます 0.0)
回転の効果に似ています本来の意味は、一度クリックした後、setIntervalを使用して本のページをめくるアニメーションを制御することですが、本のページが180度回転するとき、setIntervalをクリアします。以前に 180 度回転されていない本のページは、前のアクションを続行できません。setInterval をクリアする方法を使用できますが、アニメーション効果がよくないように感じます。もちろん、他の解決策もあります。 、しかし、CSS3 がアニメーションを提供していることに突然気づきました。アニメーションを追加することで、この問題を直接回避できます。デフォルトでは、アニメーションは毎回実行されるので、いつでも実行できます。接続されたドットが表示され、図のように各ページが自然に回転します。以下のコードと実装手順を貼り付けます。
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 中国語 Web サイトをご覧ください。
関連する推奨事項: カード回転切り替え効果を実現するための
js と CSS3 CSS3 3D 回転回転効果の使用方法の紹介以上がCSS3 を使用して 3D のめくり本の効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。