Code-Sharing zur Erzielung eines digitalen Seitenwechseleffekts mithilfe der Transformation in JavaScript (Bild)-js-Tutorial-php.cn

Code-Sharing zur Erzielung eines digitalen Seitenwechseleffekts mithilfe der Transformation in JavaScript (Bild)

黄舟

Freigeben： 2017-03-22 14:37:07

Original

2808 Leute haben es durchsucht

In diesem Artikel werden hauptsächlich Beispiele für die Verwendung von Transformation zur Erzielung eines digitalen Umblättereffekts in JavaScript vorgestellt, das einen guten Referenzwert hat. Werfen wir einen Blick darauf mit dem Editor unten

Rendering:

Bild (1) Anfangsbild

Bild (2) Umblättervorgang

Bild (3) Umblätterergebnis

Der Code lautet wie folgt:

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>transition</title>
 <style>
 #container{ width:500px; height:500px; margin:20px auto; background:#ff0000;
 -webkit-transiton:background 2s linear,width 2s,height 2s;
 -moz-transition:background 2s,width 2s,height 2s;
 -o-transition:background 2s,width 2s,height 2s;
 -ms-transition:background 2s,width 2s,height 2s;
 transition:background 2s,width 2s,height 2s;
 }
 #container:hover{ background: #00ff00;width:200px;height: 200px;}
 #my3dspace{
 -webkit-perspective:800;
 -webkit-perspective-origin:50% 50%;
 overflow: hidden;
 }
 #pagegroup{
 width: 400px;
 height: 400px;
 margin: 0 auto;
 -webkit-transform-style:preserve-3d;
 position: relative;
 }
 .page{
 width: 360px;
 height: 360px;
 padding: 20px;
 background-color: black;
 color: white;
 font-size: 360px;
 font-weight: blod;
 line-height: 360px;
 text-align: center;
 position: absolute;
 }
 #page1{
 -webkit-transform-origin:top;
 transform-origin:top;
 -webkit-transition:-webkit-transform 1s linear;
 transition:transform 1s linear;
 }
 #page2,#page3,#page4,#page5,#page6{
 -webkit-transform-origin:top;
 transform-origin:top;
 -webkit-transition:-webkit-transform 1s linear;
 transition:transform 1s linear;
 -webkit-transform:rotateX(-90deg);
 transform:rotateX(-90deg);
 }
 #op{
 text-align: center;
 margin: 40px auto;
 }
 </style>
</head>
<body>
 <p id="my3dspace">
 <p id="pagegroup">
 <p class="page" id="page1">1</p>
 <p class="page" id="page2">2</p>
 <p class="page" id="page3">3</p>
 <p class="page" id="page4">4</p>
 <p class="page" id="page5">5</p>
 <p class="page" id="page6">6</p>
 </p>
 </p>
 <p id="op">
 <a href="javascript:next()" rel="external nofollow" >next</a> 
 <a href="javascript:prev()" rel="external nofollow" >prev</a>
 </p>
 <script type="text/javascript">
 var curIndex = 1;
 function next(){
 if(curIndex==6)
 return;
 var curPage = document.getElementById("page"+curIndex);
 curPage.style.webkitTransform = "rotateX(90deg)";
 curPage.style.transform = "rotateX(90deg)";
 curIndex ++;
 var nextPage = document.getElementById("page"+curIndex);
 nextPage.style.webkitTransform="rotateX(0deg)";
 nextPage.style.transform="rotateX(0deg)";
 }
 function prev(){
 if(curIndex==1)
 return;
 var curPage =document.getElementById("page"+curIndex);
 curPage.style.webkitTransform="rotateX(-90deg)";
 curPage.style.transform="rotateX(-90deg)";
 curIndex --;
 var prevPage = document.getElementById("page"+curIndex);
 prevPage.style.webkitTransform="rotateX(0deg)";
 prevPage.style.transform="rotateX(0deg)";
 }
 </script>
</body>
</html>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonCode-Sharing zur Erzielung eines digitalen Seitenwechseleffekts mithilfe der Transformation in JavaScript (Bild). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!