生活随笔
收集整理的這篇文章主要介紹了
原生js+css3实现点击图片正方体旋转展现图片
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
--------------武漢加油！！中國加油！！陜西也給我加油！！2020-02-16------------
點擊圖片，正方體中圖片對應的面會旋轉過來。
上圖：
上代碼
<!DOCTYPE html
>
<html lang
="en"><head
><meta charset
="UTF-8"><meta name
="viewport" content
="width=device-width, initial-scale=1.0"><meta http
-equiv
="X-UA-Compatible" content
="ie=edge"><title
>cube
</title
><link rel
="stylesheet" href
="css/index.css">
</head
><body
><div
class="container"><ul
class="cube init"><li
class="img1"><img src
="img/img1.jpg" alt
=""></li
><li
class="img2"><img src
="img/img2.jpg" alt
=""></li
><li
class="img3"><img src
="img/img3.jpg" alt
=""></li
><li
class="img4"><img src
="img/img4.jpg" alt
=""></li
><li
class="img5"><img src
="img/img5.jpg" alt
=""></li
><li
class="img6"><img src
="img/img6.jpg" alt
=""></li
></ul
></div
><h2
>點擊下面圖片旋轉
</h2
><div
class="btnsAear"><input type
="image" src
="img/img1.jpg" id
="show-image-1"><input type
="image" src
="img/img2.jpg" id
="show-image-2"><input type
="image" src
="img/img3.jpg" id
="show-image-3"><input type
="image" src
="img/img4.jpg" id
="show-image-4"><input type
="image" src
="img/img5.jpg" id
="show-image-5"><input type
="image" src
="img/img6.jpg" id
="show-image-6"></div
><script
>(function(){var btnsAear
= document
.getElementsByClassName('btnsAear')[0];var cubeNode
= document
.getElementsByClassName('cube')[0];var currentList
= cubeNode
.classList
;console
.log(currentList
);var initClass
= currentList
[1];btnsAear
.addEventListener('click',function(e
){var current
= e
.target
.id
if(current
.length
>0 && current
!=initClass
){currentList
.replace(initClass
,current
);console
.log(currentList
);initClass
= current
;}})})()</script
>
</body
></html
>
總結
以上是生活随笔為你收集整理的原生js+css3实现点击图片正方体旋转展现图片的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
