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 相关文章推荐
让插入到 innerHTML 中的 script 跑起来的实现代码
Jul 01 Javascript
jquery.cvtooltip.js 基于jquery的气泡提示插件
Nov 19 Javascript
IFrame跨域高度自适应实现代码
Aug 16 Javascript
HTML Color Picker(js拾色器效果)
Aug 27 Javascript
一个简单的全屏图片上下打开显示网页效果示例
Jul 08 Javascript
javascript实现可键盘控制的抽奖系统
Mar 10 Javascript
jQuery+Ajax实现用户名重名实时检测
Jun 01 jQuery
addeventlistener监听scroll跟touch(实例讲解)
Aug 04 Javascript
代码详解Vuejs响应式原理
Dec 20 Javascript
vue实现微信分享朋友圈,发送朋友的示例讲解
Feb 10 Javascript
vue页面加载闪烁问题的解决方法
Mar 28 Javascript
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 jQuery
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
ThinkPHP2.0读取MSSQL提示Incorrect syntax near the keyword 'AS'的解决方法
2014/06/25 PHP
PHP+MySQL删除操作实例
2015/01/21 PHP
PDO防注入原理分析以及注意事项
2015/02/25 PHP
PHP利用缓存处理用户注册时的邮箱验证,成功后用户数据存入数据库操作示例
2019/12/31 PHP
jQuery JSON实现无刷新三级联动实例探讨
2013/05/28 Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
2013/08/28 Javascript
Ajax请求在数据量大的时候出现超时的解决方法
2014/02/27 Javascript
通过js来制作复选框的全选和不选效果
2014/05/22 Javascript
JavaScript通过元素的ID和name设置样式
2014/07/08 Javascript
Javascript中With语句用法实例
2015/05/14 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
2016/06/30 Javascript
Js遍历键值对形式对象或Map形式的方法
2016/08/08 Javascript
js获取form表单所有数据的简单方法
2016/08/18 Javascript
jQuery日程管理控件glDatePicker用法详解
2017/03/29 jQuery
前端把html表格生成为excel表格的实例
2017/09/19 Javascript
使用JS模拟锚点跳转的实例
2018/02/01 Javascript
小程序调用微信支付的方法
2019/09/26 Javascript
JS表格的动态操作完整示例
2020/01/13 Javascript
jQuery实现开关灯效果
2020/08/02 jQuery
Django入门使用示例
2017/12/12 Python
用python求一个数组的和与平均值的实现方法
2019/06/29 Python
pytorch 获取层权重,对特定层注入hook, 提取中间层输出的方法
2019/08/17 Python
python 实现快速生成连续、随机字母列表
2019/11/28 Python
Python面向对象编程基础实例分析
2020/01/17 Python
Python 判断时间是否在时间区间内的实例
2020/05/16 Python
使用Python提取文本中含有特定字符串的方法示例
2020/12/09 Python
pytorch 中forward 的用法与解释说明
2021/02/26 Python
Stubhub英国:购买体育、演唱会和剧院门票
2018/06/10 全球购物
捷克钓鱼用品网上商店:Parys.cz
2018/06/15 全球购物
迟到早退检讨书
2014/02/10 职场文书
《莫高窟》教学反思
2014/02/25 职场文书
金融系毕业生自荐书
2014/07/08 职场文书
个人授权委托书样本
2014/09/13 职场文书
2014审计局领导班子民主生活会对照检查材料思想汇报
2014/09/20 职场文书
写好求职信的技巧解密
2019/05/14 职场文书
Python语言内置数据类型
2022/02/24 Python