Maison >interface Web >tutoriel CSS >Comment utiliser CSS3 pour obtenir un effet de livre retourné en 3D
Comment utiliser CSS3 pour obtenir un effet de livre retourné en 3D
- 不言original
- 2018-06-25 16:56:133288parcourir
Cet article présente principalement l'effet de livre retourné 3D obtenu par CSS3. Sur la base des nouvelles propriétés CSS3 Animation et transformation, un effet de livre retourné similaire est obtenu. Il a une certaine valeur de référence.
Commençons par les rendus : (Le style est un peu moche, vous pouvez donc l'ignorer. Une fois l'effet sorti, tout ira bien. Vous pourrez l'ajouter à d'autres projets plus tard pour changer facilement 0.0)
Semblable à l'effet de tourner un livre, le sens original est d'utiliser JS pour contrôler. Après avoir cliqué une fois, utilisez setInterval pour contrôler l'animation de la page du livre lorsque le livre se retourne. la page est tournée à 180°, setInterval est effacé. Cependant, lorsque je clique en continu, les pages du livre qui n'ont pas été tournées à 180° auparavant le seront. Si vous ne pouvez pas continuer à terminer l'action précédente, vous pouvez utiliser la méthode d'effacement de setInterval, mais J'ai toujours l'impression que l'effet d'animation n'est pas bon. Bien sûr, il existe d'autres solutions, mais il m'est soudain venu à l'esprit que CSS3 nous fournit une animation. Pourquoi ne pas l'utiliser pour éviter directement ce problème ? par défaut, l'animation est exécutée à chaque fois. Par conséquent, lorsque des points connectés apparaissent, chaque page se tournera naturellement comme indiqué dans l'image ci-dessous. Collez le code et les étapes d'implémentation :
Remarque : la partie JS de cet exemple est écrite en natif. JS. Si vous n'êtes pas doué pour utiliser le JS natif, vous pouvez utiliser jQuery et d'autres frameworks tiers pour réécrire la partie
html : (Cette partie est sincère... ·, oubliez ça, soyez juste moche~.~ )
<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>Partie CSS : (En changeant la valeur de rotatey dans la transformation, l'effet de retournement de la page du livre est obtenu)
<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>Partie JS (la partie JS implémente principalement l'ajout d'attributs d'animation au p correspondant en cliquant sur la page précédente/suivante)
<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> Concernant la dernière partie JS, la La fonction principale est d'ajouter des attributs d'animation au p correspondant en cliquant sur la page précédente/suivante. Pour une explication détaillée de l'animation, vous devez toujours vérifier l'API.
En raison de problèmes de compatibilité, une meilleure solution ici consiste à ajouter une classe au lieu d'une animation. Afin de vous adapter à davantage de navigateurs, vous devez ajouter les préfixes -webkit-, -moz-···· ··. ·, alors écrivez ces choses dans une classe et ajoutez simplement la classe directement, ou écrivez une fonction, encapsulez-la et affichez directement la chaîne requise.
Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !
Recommandations associées :
js et CSS3 pour obtenir un effet de changement de rotation de carte
Introduction à l'utilisation de la rotation 3D CSS3 effet de rotation
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!