<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>旋转立方体效果</title>

  <style type="text/css">

    *{padding: 0; margin: 0}

    img{border: 0}

    ul li{list-style: none}

    ul{width: 200px; height: 200px; margin: 100px auto;

    position: relative; -webkit-transform-style: preserve-3d ;

      /* perspective: 100px;*/

    }

    /*绕中心旋转，坐标轴会随旋转而旋转*/

    li{width:200px;height:200px;position:absolute;text-align:center;line-height:200px;font-size:80px;font-weight:bold;color:#fff;}

    /*构造六个面*/

    li:nth-child(1){background:rgba(255,0,0,1);-webkit-transform:rotateX(90deg)  translateZ(100px);}

    li:nth-child(2){background:rgba(0,255,255,1);-webkit-transform:rotateX(270deg) translateZ(100px);}

    li:nth-child(3){background:rgba(255,0,255,1);-webkit-transform:rotateY(90deg) translateZ(100px);}

    li:nth-child(4){background:rgba(0,255,0,1);-webkit-transform:rotateY(270deg) translateZ(100px);}

    li:nth-child(5){background:rgba(200,200,0,1);-webkit-transform:translateZ(-100px);}

    li:nth-child(6){background:rgba(0,0,255,1);-webkit-transform: translateZ(100px) ;}

    .button{

      width: 200px; margin: 20px auto;

      position: relative;

      cursor: pointer;

    }

    input{

      width: 50px; height: 30px;

      position: absolute;

      cursor: pointer;

    }

    /*按钮的绝对定位*/

    input:nth-child(1){left: 100px; top: 0}

    input:nth-child(2){left:200px;top:50px;}

    input:nth-child(3){left:0px;top:50px;}

    input:nth-child(4){left:100px;top:100px;}

    input:nth-child(5){left:100px;top:50px;}

  </style>

  <script type="text/javascript">

    window.onload = function () {

      var x = 0, y = 0;

      var ul = document.getElementById('ul');

      var inputs = document.getElementsByTagName('input');

      for (var i = 0; i<inputs.length; i++){

        inputs[i].onclick = run;

      }

      function run() {

        /*渐变*/

        ul.style.webkitTransition = '-webkit-transform 3s linear';

        ul.style.oTransition = '-o-transform 3s linear';

        ul.style.transition = 'transform 3s linear';

        /*旋转的规则，就是x，y方向的deg改变*/

        if(inputs[0]==this){x+=90;}

        if(inputs[1]==this){y+=90;}

        if(inputs[2]==this){y-=90;}

        if(inputs[3]==this){x-=90;}

        if (inputs[4] == this){

          x = 0; y = 0;

          ul.style.webkitTransition = '-webkit-transform .1s linear';

          ul.style.oTransition = '-o-transform .1s linear';

          ul.style.transition = 'transform .1s linear';

        }

        ul.style.webkitTransform = 'rotateX(' + x + 'deg) rotateY(' + y + 'deg)';

        ul.style.oTransform = 'rotateX(' + x + 'deg) rotateY(' + y + 'deg)';

        ul.style.transform = 'rotateX(' + x + 'deg) rotateY(' + y + 'deg)';

      }

      document.addEventListener('keydown', function(e){

        ul.style.webkitTransition='-webkit-transform 3s linear';

        switch(e.keyCode){

          case 37:  y -= 90;  //左箭头

            break;

          case 38:  x += 90;  //上箭头

            break;

          case 39:  y += 90;  //下箭头

            break;

          case 40:  x -= 90;  //右箭头

            break;

          case 13:  x=0; y=0;  //回车 （当回车时，迅速转回初始状态）

            ul.style.webkitTransition='-webkit-transform 0.1s linear';

            break;

        }

        ul.style.webkitTransform = "rotateX("+x+"deg) rotateY("+y+"deg)"; //变换效果（沿X轴和Y轴旋转）

      }, false);document.addEventListener("keydown", function (e) {

        ul.style.webkitTransition = '-webkit-transform 3s linear';

        ul.style.oTransition = '-o-transform 3s linear';

        ul.style.transition = 'transform 3s linear';

        switch(e.keyCode){

          case 37:

        }

      })

    }

  </script>

</head>

<body>

<ul id="ul">

  <li>1</li>

  <li>2</li>

  <li>3</li>

  <li>4</li>

  <li>5</li>

  <li>6</li>

</ul>

<div class="container">

</div>

<div class="button">

  <input type="button" value="上">

  <input type="button" value="右">

  <input type="button" value="左">

  <input type="button" value="下">

  <input type="button" value="重置">

</div>

</body>

</html>

原生JavaScript实现可旋转立方体效果基础示例的更多相关文章

  1. 原生javascript实现图片放大镜效果

    当我们在电商网站上购买商品时,经常会看到这样一种效果,当我们把鼠标放到我们浏览的商品图片上时,会出现类似放大镜一样的一定区域的放大效果,方便消费者观察商品.今天我对这一技术,进行简单实现,实现图片放大 ...

  2. javascript学习-原生javascript的小特效（多个运动效果整理）

    以下代码就不详细解析了,在我之前的多个运动效果中已经解析好多次了,重复的地方这里就不说明了,有兴趣的童鞋可以去看看之前的文章<原生javascript的小特效> <!DOCTYPE ...

  3. 原生javascript写的侧栏跟随效果

    浏览网站时经常看到有的网站上,当一个页面很长的时候,设定侧栏内容会跟随滚动条滚动,我们把这种效果叫做“侧栏跟随滚动”.这种特效对提高网站浏览量.文章点击率.广告点击量都有一定效果. 侧栏跟随滚动的实现 ...

  4. 原生JavaScript运动功能系列（五）：定时定点运动

    原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现 原生JavaScript运动功能系列(二):缓冲运动 原生JavaScript运动功能系列(三):多物体多值运动 原生JavaS ...

  5. JavaScript常用，继承，原生JavaScript实现classList

    原文链接:http://caibaojian.com/8-javascript-attention.html 基于 Class 的组件最佳实践(Class Based Components) 基于 C ...

  6. C#构造方法(函数) C#方法重载 C#字段和属性 MUI实现上拉加载和下拉刷新 SVN常用功能介绍(二) SVN常用功能介绍(一) ASP.NET常用内置对象之——Server sql server——子查询 C#接口 字符串的本质 AJAX原生JavaScript写法

    C#构造方法(函数)   一.概括 1.通常创建一个对象的方法如图: 通过  Student tom = new Student(); 创建tom对象,这种创建实例的形式被称为构造方法. 简述:用来初 ...

  7. 你可能不需要 jQuery！使用原生 JavaScript 进行开发

    很多的 JavaScript 开发人员,包括我在内,都很喜欢 jQuery.因为它的简单,因为它有很多丰富的插件可供使用,和其它优秀的工具一样,jQuery 让我们开发人员能够更轻松的开发网站和 We ...

  8. 表单美化-原生javascript和jQuery单选按钮（兼容IE6）

    最近很多人问怎么美化表单的元素,大家都知道表单元素在各个浏览器中的表现不一,反正也是特别的丑,那么问题就来了,我们能自己设计表单元素的外观么?答案是可以的,现在我们就来试试吧.我们用两种方式来实现这一 ...

  9. 原生JavaScript运动功能系列（二）：缓冲运动

    匀速运动实现回顾 缓冲运动剖析 示例实现 方法提取 匀速运动实现回顾及缓冲运动剖析: 在这个系列的上一篇博客中原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现就运动的核心功能组成 ...

  10. 原生 JavaScript 实现 state 状态管理系统

    原生 JavaScript 实现 state 状态管理系统 Build a state management system with vanilla JavaScript | CSS-Tricks 在 ...

随机推荐

  1. hbuilderx集成集中式版本控制系统SVN

    前提条件: 1.下载最新的hbuilderx https://www.dcloud.io/hbuilderx.html 2.安装Tortorisesvn客户端,特别注意安装时一定要安装command ...

  2. 微软账号密码修改后提示密码错误的解决方法(远程桌面&smb共享访问等)

    众所周知,自从微软将Microsoft账户与Windows账号强制绑定后,使用起来便一直有诸多困难,在Microsoft Support和搜索引擎长期搜索解决方案未果,今天偶然在一个佬的博客翻到了这个 ...

  3. leetcode简单(设计)：[225, 232, 303, 703, 705, 706, 933, 1603, 1656, 09, 30, 041, 03.06]

    目录 225. 用队列实现栈(先入后出) 232. 用栈实现队列(先入先出) 303. 区域和检索 - 数组不可变 703. 数据流中的第 K 大元素 705. 设计哈希集合 706. 设计哈希映射 ...

  4. 题解：AT_abc360_c [ABC360C] Move It

    背景 机房大佬掉大分了,乐悲. 题意 给你几个箱子和每个箱子里装有的东西 \(a\) 和对应的重量 \(w\),现在要让每个箱子里都装有一个东西,每次可以移动任意一个箱子中的任意一个东西,代价为它的重 ...

  5. 理解es6 Promise的resolve和reject方法

    Promise.resolve() 有时需要将现有对象转为 Promise 对象,Promise.resolve方法就起到这个作用. const jsPromise = Promise.resolve ...

  6. jwt redis，微信登陆知识复习 uniapp 请求封装，统一异常处理 相关， HutoolDemo工具介绍）

    第三节   后台布局搭建,代码可以人工智能来写,但是环境初步搭建需要我们先建起来,所以以下记录快带搭建的过程, 思路: 后台首页的搭建 第一   用到了element--UI 自带的页面布局组件,它就 ...

  7. 题解 WD与数列

    P5161 WD与数列 可以想到原条件是一个差分形式,所以我们对原数组差分.然后发现答案其实就是 \(\sum_{i<j} \min(lcp(i+1,j+1)+1,j-i)\). 这个东西先跑 ...

  8. 【DataBase】SQL优化问题

    在DAO层的动态SQL: //订单新增,查询配件主数据 @SuppressWarnings("rawtypes") public PageInfoDto getPartsForPa ...

  9. 【Mybatis-Plus】06 代码生成器 CodeGenerator

    导入生成器需要的依赖坐标: <dependency> <groupId>com.baomidou</groupId> <artifactId>mybat ...

  10. 如何理解自动驾驶的分级：L0、L1、L2、L3、L4、L5

    相关: https://baijiahao.baidu.com/s?id=1792281493472406727&wfr=spider&for=pc L0,就是完全没有自动驾驶技术的车 ...