<!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. Luogu P5745 区间最大和

    原题链接:Luogu P5745 区间最大和 初看这道题,

  2. 使用浏览器的cookies进行登陆

    1.使用浏览器Cookie登陆 In [ ]: cookie = 'uniqueVisitorId=a2151df1-4833-00ae-72e0-f4b99d2b7be2; pgv_pvid=232 ...

  3. 如何做好一场NPS调研？

    我们在工作中经常遇到的一个词,那就是"产品NPS调研".当部分项目缺少专业的用研人员时,设计师.产品经理则经常会接受上级的要求,投身于NPS调研工作. 笔者也曾在2022年的某天突 ...

  4. 机器学习策略篇：详解处理数据不匹配问题（Addressing data mismatch）

    处理数据不匹配问题 如果您的训练集来自和开发测试集不同的分布,如果错误分析显示有一个数据不匹配的问题该怎么办?这个问题没有完全系统的解决方案,但可以看看一些可以尝试的事情.如果发现有严重的数据不匹配问 ...

  5. vs2019如何自动生成有下划线前缀的字段名？

    vs2019代码自动完成功能非常强大,今天要说的是根据构造函数的参数自动生成字段的事儿. 下图所示,IDE可以根据构造函数的参数自动生成私有字段 这个功能非常好,代码编写效率大大提升,生成的代码如下: ...

  6. TIER 0: Fawn

    FTP FTP(File Transfer Protocol)是一种用于在网络上进行文件传输的协议和相应的工具 RFC 959 文档:是定义了 FTP 协议的规范 FTP 使用两个不同的端口 TCP/ ...

  7. SUM-ACM,3月24-3-31周报

    两场天梯赛和一场atcoder. 主要错误知识点在于字符串的处理和并查集的掌握不够,不懂灵活运用. 第一场pta天梯赛 7-5 6翻了 一道字符串的题,我只拿了14分.我不熟悉一个点,f(i,0,s. ...

  8. 【Zookeeper】03 单机操作

    访问Zookeeper 开启Zookeeper服务程序: ./zkServer.sh start 启动Zookeeper客户端进行访问: ./zkCli.sh 运行打印: [root@VM-0-7-c ...

  9. Git安装与windows终端配置Git-bash

    Git概述 简介 Git是一个分布式版本控制工具,通常用来对软件开发过程中的源代码文件进行管理.通过Git仓库存储和管理这些文件,Git仓库分为两种: 本地仓库:开发人员自己电脑上的Git仓库 远程仓 ...

  10. 视频分享---------《无人机背后的PID控制》

    在B站上看到有讲无人机自动控制方面的视频,感觉不错,分享下: https://www.bilibili.com/video/BV1aW411E7Qq/?spm_id_from=333.788.vide ...