js实现3d悬浮效果
更新时间：2017年02月16日 10:19:31 作者：hd564964
本文主要分享了js实现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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
Javascript中函数名.length属性用法分析(对比arguments.length)
这篇文章主要介绍了Javascript中函数名.length属性用法,结合实例形式简单对比分析了与arguments.length属性的用法区别,需要的朋友可以参考下2016-09-09
这篇文章主要介绍了微信小程序嵌入腾讯视频源过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-08-08
Bootstrap轮播插件中图片变形的终极解决方案 使用jqthumb.js
这篇文章主要介绍了Bootstrap轮播插件中图片变形的终极解决方案，使用jqthumb.js，感兴趣的小伙伴们可以参考一下2016-07-07
这篇文章主要为大家详细介绍了JavaScript动态加载CSS和JS文件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2015-10-10
矢量图形最大的优点是无论放大、缩小或旋转等不会失真。在地图中存在着大量的应用，是地图数据中非常重要的组成部分，这篇文章主要介绍了OpenLayers 3加载矢量地图源的相关资料,需要的朋友可以参考下2021-12-12
这篇文章主要介绍了js精准计算，对此感兴趣的同学，可以实验一下2021-04-04
最近在项目需求中遇到之前没有做过的功能,下面这篇文章主要给大家介绍了关于JS实用案例之输入智能提示,文中通过实例代码介绍的非常详细,打字机输出效果的相关资料,需要的朋友可以参考下2023-01-01
这篇文章介绍了Javascript实现页面跳转的几种方式，有需要的朋友可以参考一下2013-10-10
跟我学习javascript的最新标准ECMAScript 6，ES6（ECMAScript 6）是即将到来的新版本JavaScript语言的标准，代号harmony，感兴趣的小伙伴们可以参考一下2015-11-11
本文给大家汇总了一下javascript的数组排序算法，包括冒泡排序、快速排序、插入排序、希尔排序，希望对大家熟悉javascript数组排序能够有所帮助。2015-07-07
最新评论