<!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. java后端解决请求跨域

    跨域 跨域:指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制. 例如:a页面想获取b页面资源,如果a.b页面的协议.域名.端口.子域名不同 ...

  2. 原创软件 | 系统服务工具箱原创软件（587KB）--基于aardio开发的第一个程序

    1 系统服务工具箱简介 该软件是我使用aardio开发的第一个程序,它集成了多个系统常用的快捷键,无需记住各种命令就能快捷使用cmd管理员.计算机管理.控制面板.组策略.注册表.服务.任务管理.卸载程 ...

  3. 我从 Python 潮流周刊提取了 800 个链接，精选文章、开源项目、播客视频集锦

    你好,我是豌豆花下猫.前几天,我重新整理了 Python 潮流周刊的往期分享,推出了第 1 季的图文版电子书,受到了很多读者的一致好评. 但是,合集和电子书的篇幅很长,阅读起来要花不少时间.所以,为了 ...

  4. RSA加解密，Java和C#互通

    一.使用场景 Java作为服务端生成一对公私钥,C#作为客户端拥有公钥. RSA算法这里就不多做介绍了,可参考RSA算法介绍 二.规范 公私钥的形式都是base64字符串 通过公私钥加密后的字符串也是 ...

  5. 如何在.NET Framework,或NET8以前的项目中使用C# 12的新特性

    前两天发了一篇关于模式匹配的文章,链接地址,有小伙伴提到使用.NET6没法体验 C#新特性的疑问, 其实呢只要本地的SDK源代码编译器能支持到的情况下(直接下载VS2022或者VS的最新preview ...

  6. python selenium 判断元素是否存在，实现：找到元素，执行对应的代码；找不到元素，继续执行其他代码

    selenium因为找不到元素会抛出异常,导致执行结束 可以考虑使用driver.find_elements(),找不到元素时就会返回空列表,使用if-else语句,判断列表是否为空,非空,则正常找到 ...

  7. php环境-2024年3月19日

    laravel 6[laravel的orm比其他框架的好用,可以写很少的代码就能完成] php 7.4 mysql 5.7 centos7 redis jwt 队列(laravel的redis队列,或 ...

  8. python修改类属性

    python修改类属性 1,当类属性为不可变的值时,不可以通过实例对象去修改类属性 class Foo(object): x = 1.5 foo = Foo() print(foo.x) #输出:1. ...

  9. 【转载】 miniImageNet数据集介绍

    版权声明:本文为CSDN博主「miguemath」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明.原文链接:https://blog.csdn.net/wangkai ...

  10. 最佳实践：解读GaussDB(DWS) 统计信息自动收集方案

    摘要:现在商用优化器大多都是基于统计信息进行查询代价评估,因此统计信息是否实时且准确对查询影响很大,特别是分布式数据库场景.本文详细介绍GaussDB(DWS)如何实现了一种轻量.实时.准确的统计信息 ...