<!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. MySQL派生表合并优化的原理和实现

    本文分享自华为云社区<[华为云MySQL技术专栏]MySQL 派生表合并优化的原理和实现>,作者:GaussDB 数据库. 引言 MySQL是一种流行的开源关系型数据库管理系统,广泛应用于 ...

  2. PowerBuilder编程新思维10.5：外传2（PowerPlume下一代开发解决方案）

    万里归来年愈少 PB编程新思维10.5:外传2(PowerPlume下一代解决方案) 前言 今天我们就来盘点一下,PB下一代开发的所有技术可能性.所谓下一代开发技术,就是指脱离或半脱离PBVM的应用开 ...

  3. 精品 IDEA 插件大汇总！值得收藏

    轻松提高 Java 开发效率 俗话说,工欲善其事,必先利其器.想要提升编程开发效率,必须选择一款顺手的开发工具. 对于 Java 开发者,JetBrains IDEA 无疑是目前最主流的开发工具,既简 ...

  4. [oeasy]python0136_接收输入_input函数_字符串_str

    输入变量 回忆上次内容 上次研究了 一行赋值多个变量 a = b = 5 a, b = 7, 8   还研究了 标识符的惯用法 python使用的是 snake_case蛇形命名法 用下划线 分隔开小 ...

  5. [oeasy]python0081_ANSI序列由来_终端机_VT100_DEC_VT选项_终端控制序列

    更多颜色 回忆上次内容 上次 首先了解了RGB颜色设置 可以把一些抽象的色彩名字 落实到具体的 RGB颜色 计算机所做的一切 其实就是量化.编码 把生活的一切都进行数字化 标准 是ANSI制定的 这个 ...

  6. 第八节 JMeter基础-高级登录【数据库数据驱动】

    声明:本文所记录的仅本次操作学习到的知识点,其中商城IP错误,请自行更改. 背景:获取数据库用户表中的数据进行登录接口测试.思路: 引用jar包[测试计划]. 设置数据库的连接信息,取变量名db1-- ...

  7. [rCore学习笔记 02]Ubuntu 22虚拟机安装

    写在前面 本随笔是非常菜的菜鸡写的.如有问题请及时提出. 可以联系:1160712160@qq.com GitHhub:https://github.com/WindDevil (目前啥也没有 Ubu ...

  8. 倒装句&强调句

    倒装句 你[吃][胡萝卜]了吗? 吃胡萝卜了吗,[你]? 强调点不同 汉语常见于口语表达 英语则常见于书面用语 英语的语序是 主语 谓语(动词) 通常把谓语动词提前 1.完全倒装句 谓语部分完全放在主 ...

  9. SemanticKernel/C#：检索增强生成(RAG)简易实践

    检索增强生成(RAG)是什么? RAG是"Reference-based Generative model with Attention"的缩写,也可以被称为"Retri ...

  10. 11、Git之自建项目托管平台（GitLab极狐）

    11.1.简介 Github 是国外的项目托管平台,由于网络问题,在国内访问和使用不是很方便. Gitee 是国内的项目托管平台,虽然在访问和使用上挺方便的,但依然让人担忧项目代码可能会被泄露. 因此 ...