<!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. Pypi配置API Token

    技术背景 在许久之前写的一篇博客中,我们介绍过使用twine向pypi上传我们自己的开源包的方法.最近发现这个方法已经不再支持了(报错信息如下所示),现在最新版需要使用API Token进行文件上传, ...

  2. Java开发环境配置（IDEA系列）

    一.IDEA安装和破解,JDK1.8 以上或JDK 16 下一步下一步,安装jdk配置环境变量: 二.Maven安装 和IDEA集成Maven IDEA 配置 Maven 环境 1.选择 IDEA中 ...

  3. 使用pyqt5制作简单计分桌面应用

    这是一个自己写的使用pyqt5制作简单计分桌面应用的实例,希望对大家有所帮助.制作这个小程序的起因是因为有个艺术类比赛需要设计这个一个桌面程序,方便统分. (此程序尚存在部分小bug,请慎用,公开代码 ...

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

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

  5. 3 - 【RocketMQ 系列】CentOS 7.6 安装部署RocketMQ

    四.安装管理面板 1.介质下载 下载到本地再上传,下载地址:https://github.com/apache/rocketmq-dashboard/archive/refs/tags/rocketm ...

  6. webgl未使用独立显卡报告2

    楔子 在上一篇文章 <# [https://juejin.cn/post/7074771064286347301] webgl未使用独立显卡报告> 发表后,有读者在公众号给我发了一段评论, ...

  7. Nuxt.js头部魔法：轻松自定义页面元信息，提升用户体验

    扫描二维码关注或者微信搜一搜:编程智域 前端至全栈交流与成长 useHead 函数概述 useHead是一个用于在 Nuxt 应用中自定义页面头部属性的函数.它由Unhead库提供支持,允许开发者以编 ...

  8. [oeasy]python0002_终端_CLI_GUI_编程环境_游戏_真实_元宇宙 🥊

    回忆   上次 了解了 python 语言的特点 历史悠久 功能强大 深受好评 已成趋势   3大主流操作系统 mac windows linux             添加图片注释,不超过 140 ...

  9. oeasy教您玩转vim - 79 - # 编码格式encoding

    ​ ​ - `help encoding-name` ​ ![图片描述](https://s4.51cto.com/images/blog/202201/03083053_61d243bd719358 ...

  10. nacos一个奇怪的问题：找不到正确的应用名-环境.后缀名配置文件

    spring: profiles: active: dev application: name: system-api cloud: nacos: server-addr: 192.168.101.6 ...