js實現(xiàn)3d懸浮效果
更新時間：2017年02月16日 10:19:31 作者：hd564964
本文主要分享了js實現(xiàn)3d懸浮效果的示例代碼，具有很好的參考價值，下面跟著小編一起來看下吧
效果如下：
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0; padding: 0;}
ul,li{list-style: none;}
.container{perspective: 1300;-webkit-perspective:1300;}
.boxList{position:absolute;width: 630px;height:630px;left:50%;margin-left:-315px; -webkit-transform-style: preserve-3d;transform-style: preserve-3d;/*animation: a1 2s 1;*/transition: all 2s;}
.boxList li{float: left;width: 200px;height: 200px;margin:5px;background: darkcyan;-webkit-transition: all 0.3s;transition: all 0.3s;}
.on li:hover{-webkit-transform: translate3d(0,0,30px);transform: translate3d(0,0,30px);background:deepskyblue;box-shadow: 30px 30px 10px rgba(0, 0, 0, 0.5);}
.on{webkit-transform: rotateX(75deg) rotateY(0deg) rotateZ(45deg);transform: rotateX(75deg) rotateY(0deg) rotateZ(45deg);}
</style>
</head>
<body>
<div class="container">
<ul class="boxList">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
<script>
var list=document.querySelector('.boxList');
window.onload=function(){
setInterval(transition,1000)
}
function transition(){
list.className='on boxList';
}
</script>
</html>
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關文章
Javascript中函數(shù)名.length屬性用法分析(對比arguments.length)
這篇文章主要介紹了Javascript中函數(shù)名.length屬性用法,結(jié)合實例形式簡單對比分析了與arguments.length屬性的用法區(qū)別,需要的朋友可以參考下2016-09-09
這篇文章主要介紹了微信小程序嵌入騰訊視頻源過程詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-08-08
Bootstrap輪播插件中圖片變形的終極解決方案 使用jqthumb.js
這篇文章主要介紹了Bootstrap輪播插件中圖片變形的終極解決方案，使用jqthumb.js，感興趣的小伙伴們可以參考一下2016-07-07
如何實現(xiàn)JavaScript動態(tài)加載CSS和JS文件
這篇文章主要為大家詳細介紹了JavaScript動態(tài)加載CSS和JS文件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-10-10
矢量圖形最大的優(yōu)點是無論放大、縮小或旋轉(zhuǎn)等不會失真。在地圖中存在著大量的應用，是地圖數(shù)據(jù)中非常重要的組成部分，這篇文章主要介紹了OpenLayers 3加載矢量地圖源的相關資料,需要的朋友可以參考下2021-12-12
這篇文章主要介紹了js精準計算，對此感興趣的同學，可以實驗一下2021-04-04
最近在項目需求中遇到之前沒有做過的功能,下面這篇文章主要給大家介紹了關于JS實用案例之輸入智能提示,文中通過實例代碼介紹的非常詳細,打字機輸出效果的相關資料,需要的朋友可以參考下2023-01-01
Javascript實現(xiàn)頁面跳轉(zhuǎn)的幾種方式分享
這篇文章介紹了Javascript實現(xiàn)頁面跳轉(zhuǎn)的幾種方式，有需要的朋友可以參考一下2013-10-10
跟我學習javascript的最新標準ECMAScript 6，ES6（ECMAScript 6）是即將到來的新版本JavaScript語言的標準，代號harmony，感興趣的小伙伴們可以參考一下2015-11-11
本文給大家匯總了一下javascript的數(shù)組排序算法，包括冒泡排序、快速排序、插入排序、希爾排序，希望對大家熟悉javascript數(shù)組排序能夠有所幫助。2015-07-07