js实现3d悬浮效果


Posted in Javascript onFebruary 16, 2017

效果如下:

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 相关文章推荐
javascript 鼠标滚轮事件
Apr 09 Javascript
JavaScript 异步调用框架 (Part 1 - 问题 &amp; 场景)
Aug 03 Javascript
js关闭父窗口时关闭子窗口
Apr 01 Javascript
Jquery getJSON方法详细分析
Dec 26 Javascript
jQuery内容过滤选择器用法分析
Feb 10 Javascript
js实现的黑背景灰色二级导航菜单效果代码
Aug 24 Javascript
JavaScript浏览器对象之一Window对象详解
Jun 03 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
Sep 19 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
Mar 02 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
Mar 31 Javascript
JS仿Base.js实现的继承示例
Apr 07 Javascript
JS实现基于拖拽改变物体大小的方法
Jan 23 Javascript
JavaScript中利用构造器函数模拟类的方法
Feb 16 #Javascript
js实现截图保存图片功能的代码示例
Feb 16 #Javascript
javaScript+turn.js实现图书翻页效果实例代码
Feb 16 #Javascript
原生JS实现图片翻书效果
Feb 16 #Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
Feb 16 #Javascript
js+html制作简单验证码
Feb 16 #Javascript
Vue 仿百度搜索功能实现代码
Feb 16 #Javascript
You might like
用PHP伪造referer突破网盘禁止外连的代码
2008/06/15 PHP
php动态函数调用方法
2015/05/21 PHP
PHP实现的oracle分页函数实例
2016/01/25 PHP
ExtJs grid行 右键菜单的两种方法
2010/06/19 Javascript
将光标定位于输入框最右侧实现代码
2012/12/04 Javascript
jquery中prop()方法和attr()方法的区别浅析
2013/09/06 Javascript
获取select元素被选中的文本内容的js代码
2014/01/29 Javascript
jQuery元素选择器用法实例
2014/12/23 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
2015/03/03 Javascript
JavaScript中扩展Array contains方法实例
2020/08/23 Javascript
深入理解JavaScript中为什么string可以拥有方法
2016/05/24 Javascript
Jquery为DIV添加click事件的简单实例
2016/06/02 Javascript
JS实现鼠标移上去显示图片或微信二维码
2016/12/14 Javascript
详解基于webpack搭建react运行环境
2017/06/01 Javascript
vue 组件中添加样式不生效的解决方法
2018/07/06 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
2018/08/09 jQuery
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
2018/08/13 Javascript
webuploader分片上传的实现代码(前后端分离)
2018/09/10 Javascript
vue集成百度UEditor富文本编辑器使用教程
2018/09/21 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
2019/11/05 Javascript
[02:56]《DAC最前线》之国外战队抵达上海备战亚洲邀请赛
2015/01/28 DOTA
Python BeautifulSoup中文乱码问题的2种解决方法
2014/04/22 Python
python 动态生成变量名以及动态获取变量的变量名方法
2019/01/20 Python
解决Django部署设置Debug=False时xadmin后台管理系统样式丢失
2020/04/07 Python
如何在Win10系统使用Python3连接Hive
2020/10/15 Python
通过css3动画和opacity透明度实现呼吸灯效果
2019/08/09 HTML / CSS
美国知名运动产品零售商:Foot Locker
2016/07/23 全球购物
Hotels.com南非:酒店预订
2017/11/02 全球购物
客服专员岗位职责范本
2013/11/29 职场文书
2014村党支部书记党建工作汇报材料
2014/11/02 职场文书
保管员岗位职责
2015/02/14 职场文书
美术教师求职信范文
2015/03/20 职场文书
刑事附带民事上诉状
2015/05/23 职场文书
golang判断key是否在map中的代码
2021/04/24 Golang
详解python中[-1]、[:-1]、[::-1]、[n::-1]使用方法
2021/04/25 Python
《月歌。》宣布制作10周年纪念剧场版《RABBITS KINGDOM THE MOVIE》
2022/04/02 日漫