JS+CSS實現3D切割輪播圖的方法

這篇“JS+CSS實現3D切割輪播圖的方法”文章，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要參考一下，對于“JS+CSS實現3D切割輪播圖的方法”，小編整理了以下知識點，請大家跟著小編的步伐一步一步的慢慢理解，接下來就讓我們進入主題吧。

css是什么意思

css是一種用來表現HTML或XML等文件樣式的計算機語言，主要是用來設計網頁的樣式，使網頁更加美化。它也是一種定義樣式結構如字體、顏色、位置等的語言，并且css樣式可以直接存儲于HTML網頁或者單獨的樣式單文件中，而樣式規則的優先級由css根據這個層次結構決定，從而實現級聯效果，發展至今，css不僅能裝飾網頁，也可以配合各種腳本對于網頁進行格式化。

具體內容如下

第一步：我們首先要通過CSS來完成一個基本布局，利用 transform-style: preserve-3d設置成3D。

下面是CSS部分的代碼

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
li {
 list-style: none;
}
/* 輪播圖 */
.homePage {
 width: 800px;
 height: 200px;
 margin: 150px auto;
 background-color: pink;
 position: relative;
 /* overflow: hidden; */
}

.homePage>ul {
 width: 100%;
 height: 100%;
}

.homePage>ul>li {
 width: 200px;
 height: 100%;
 float: left;
 transform-style: preserve-3d;
 position: relative;
 transition: all 1s;
}

.homePage>ul>li>span {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

.homePage>ul>li>span:nth-child(1) {
 background-image: url(../images/bxqy.jpg);
 transform: translateZ(100px);
}
.homePage>ul>li>span:nth-child(2) {
 background-image: url(../images/fczlm.jpg);
 transform: rotateX(90deg) translateZ(100px);
}
.homePage>ul>li>span:nth-child(3) {
 background-image: url(../images/hfh.jpg);
 transform: rotateX(180deg) translateZ(100px);
}
.homePage>ul>li>span:nth-child(4) {
 background-image: url(../images/ss.jpg);
 transform: rotateX(270deg) translateZ(100px);
}

/* 圖片的定位 */
.homePage>ul>li:nth-child(2) span {
 background-position: -200px 0;
}
.homePage>ul>li:nth-child(3) span {
 background-position: -400px 0;
}
.homePage>ul>li:nth-child(4) span {
 background-position: -600px 0;
}

/* 小按鈕 */
a {
 position: absolute;
 width: 30px;
 height: 70px;
 background-color: rgba(0,0,0,.2);
 text-decoration: none;
 color: #fff;
 top: 50%;
 margin-top: -35px;
 line-height: 70px;
 text-align: center;
 display: none;
}
.right {
 right: 0;
}

第二步：我們利用JS來調整圖片運動時的切割速度以及方向。

下面是js的代碼。

$(function(){
 var index = 0;
 var flag = true;
 var time = setInterval(move, 700);

 // 下一張
 function move(){
 if(!flag) return;
 flag = false;
 index++;
 $(".homePage>ul>li").css("transform","rotateX(" + (-90 * index) + "deg)").each(function(index,item){
  $(item).css("transition-delay",index * 0.2 + "s");
 });
 }

 // 移入移出
 $(".homePage").mouseenter(function(){
 clearInterval(time);
 $(".homePage>a").css("display","block");
 })
 $(".homePage").mouseleave(function(){
 time = setInterval(move, 700);
 $(".homePage>a").css("display","none");
 })

 // 點擊左邊按鈕：上一張
 $(".left").on("click",function(){
 if(!flag) return;
 flag = false;
 index--;
 $(".homePage>ul>li").css("transform","rotateX(" + (-90 * index) + "deg)").each(function(index,item){
  $(item).css("transition-delay",index * 0.2 + "s");
 });
 })

 // 點擊有面按鈕：下一張
 $(".right").click(move);

 // 動畫整個過渡結束之后，transitionend過渡完成時觸發
 $("li:last").on("transitionend",function(){
 flag = true;
 })
})

最后：body區域代碼如下

 <div class="homePage">
 <ul>
  <li>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  </li>
  <li>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  </li>
  <li>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  </li>
  <li>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  </li>
 </ul>
 <a class="left" href="javascript:;" ><</a>
 <a class="right" href="javascript:;" >></a>
 </div>
 
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/demo.js"></script>

注意：要利用 overflow: hidden;來隱藏切割時超出的部分。最后3D切割輪播圖就完成了。

以上是“JS+CSS實現3D切割輪播圖的方法”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！