【js】变形功率正方体

最新推荐文章于 2023-09-16 12:21:24 发布
最新推荐文章于 2023-09-16 12:21:24 发布
阅读量778 收藏
点赞数
分类专栏： js 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Morphing Power Cubes</title>
  <style type="text/css" media="screen">
    body {
      background-color: black;
      color: white;
      font-family: 'Lucida Grande', Verdana, Arial;
      font-size: 12px;
      background-image: -webkit-gradient(radial,
                            50% 500, 1,
                            50% 500, 400,
                            from(rgba(255, 255, 255, 0.3)),
                            to(rgba(255, 255, 255, 0)));
     background-repeat: no-repeat;
    }

    #container {
      width: 100%;
      height: 700px;
      -webkit-perspective: 800; /* For compatibility with iPhone 3.0, we leave off the units here */
      -webkit-perspective-origin: 50% 225px;
    }
    #stage {
      width: 100%;
      height: 100%;
      -webkit-transition: -webkit-transform 2s;
      -webkit-transform-style: preserve-3d;
    }
    
    #shape {
      position: relative;
      top: 160px;
      margin: 0 auto;
      height: 200px;
      width: 200px;
      -webkit-transform-style: preserve-3d;
    }
    
    .plane {
      position: absolute;
      height: 200px;
      width: 200px;
      border: 1px solid white;
      -webkit-border-radius: 12px;
      -webkit-box-sizing: border-box;
      text-align: center;
      font-family: Times, serif;
      font-size: 124pt;
      color: black;
      background-color: rgba(255, 255, 255, 0.6);
      -webkit-transition: -webkit-transform 2s, opacity 2s;
      -webkit-backface-visibility: hidden;
    }

    #shape.backfaces .plane {
      -webkit-backface-visibility: visible;
    }
    
    #shape {
      -webkit-animation: spin 8s infinite linear;
    }

    @-webkit-keyframes spin {
      from { -webkit-transform: rotateY(0); }
      to   { -webkit-transform: rotateY(-360deg); }
    }

    /* ---------- cube styles ------------- */
    .cube > .one {
      opacity: 0.5;
      -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(90deg) translateZ(100px);
    }

    .cube > .two {
      opacity: 0.5;
      -webkit-transform: scale3d(1.2, 1.2, 1.2) translateZ(100px);
    }

    .cube > .three {
      opacity: 0.5;
      -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(100px);
    }

    .cube > .four {
      opacity: 0.5;
      -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(180deg) translateZ(100px);
    }

    .cube > .five {
      opacity: 0.5;
      -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(-90deg) translateZ(100px);
    }

    .cube > .six {
      opacity: 0.5;
      -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(-90deg) translateZ(100px) rotate(180deg);
    }


    .cube > .seven {
      -webkit-transform: scale3d(0.8, 0.8, 0.8) rotateX(90deg) translateZ(100px) rotate(180deg);
    }

    .cube > .eight {
      -webkit-transform: scale3d(0.8, 0.8, 0.8) translateZ(100px);
    }

    .cube > .nine {
      -webkit-transform: scale3d(0.8, 0.8, 0.8) rotateY(90deg) translateZ(100px);
    }

    .cube > .ten {
      -webkit-transform: scale3d(0.8, 0.8, 0.8) rotateY(180deg) translateZ(100px);
    }

    .cube > .eleven {
      -webkit-transform: scale3d(0.8, 0.8, 0.8) rotateY(-90deg) translateZ(100px);
    }

    .cube > .twelve {
      -webkit-transform: scale3d(0.8, 0.8, 0.8) rotateX(-90deg) translateZ(100px);
    }

    /* ---------- ring styles ------------- */
    .ring > .one {
      -webkit-transform: translateZ(380px);
    }

    .ring > .two {
      -webkit-transform: rotateY(30deg) translateZ(380px);
    }

    .ring > .three {
      -webkit-transform: rotateY(60deg) translateZ(380px);
    }

    .ring > .four {
      -webkit-transform: rotateY(90deg) translateZ(380px);
    }

    .ring > .five {
      -webkit-transform: rotateY(120deg) translateZ(380px);
    }

    .ring > .six {
      -webkit-transform: rotateY(150deg) translateZ(380px);
    }

    .ring > .seven {
      -webkit-transform: rotateY(180deg) translateZ(380px);
    }

    .ring > .eight {
      -webkit-transform: rotateY(210deg) translateZ(380px);
    }

    .ring > .nine {
      -webkit-transform: rotateY(-120deg) translateZ(380px);
    }

    .ring > .ten {
      -webkit-transform: rotateY(-90deg) translateZ(380px);
    }

    .ring > .eleven {
      -webkit-transform: rotateY(300deg) translateZ(380px);
    }

    .ring > .twelve {
      -webkit-transform: rotateY(330deg) translateZ(380px);
    }

    .controls {
      width: 80%;
      margin: 0 auto;
      padding: 5px 20px;
      -webkit-border-radius: 12px;
      background-color: rgba(255, 255, 255, 0.5);
    }
    .controls > div {
      margin: 10px;
    }
  </style>
  <script type="text/javascript" charset="utf-8">
    function hasClassName(inElement, inClassName)
    {
        var regExp = new RegExp('(?:^|\\s+)' + inClassName + '(?:\\s+|$)');
        return regExp.test(inElement.className);
    }

    function addClassName(inElement, inClassName)
    {
        if (!hasClassName(inElement, inClassName))
            inElement.className = [inElement.className, inClassName].join(' ');
    }

    function removeClassName(inElement, inClassName)
    {
        if (hasClassName(inElement, inClassName)) {
            var regExp = new RegExp('(?:^|\\s+)' + inClassName + '(?:\\s+|$)', 'g');
            var curClasses = inElement.className;
            inElement.className = curClasses.replace(regExp, ' ');
        }
    }

    function toggleClassName(inElement, inClassName)
    {
        if (hasClassName(inElement, inClassName))
            removeClassName(inElement, inClassName);
        else
            addClassName(inElement, inClassName);
    }

    function toggleShape()
    {
      var shape = document.getElementById('shape');
      if (hasClassName(shape, 'ring')) {
        removeClassName(shape, 'ring');
        addClassName(shape, 'cube');
      } else {
        removeClassName(shape, 'cube');
        addClassName(shape, 'ring');
      }
      
      // Move the ring back in Z so it's not so in-your-face.
      var stage = document.getElementById('stage');
      if (hasClassName(shape, 'ring'))
        stage.style.webkitTransform = 'translateZ(-200px)';
      else
        stage.style.webkitTransform = '';
    }
    
    function toggleBackfaces()
    {
      var backfacesVisible = document.getElementById('backfaces').checked;
      var shape = document.getElementById('shape');
      if (backfacesVisible)
        addClassName(shape, 'backfaces');
      else
        removeClassName(shape, 'backfaces');
    }
  </script>
</head>
<body>

  <div class="controls">
    <h1>Animations, Transitions and 3D Transforms</h1>
    <p>This demo shows some more interesting content using 3D transforms, animations and transitions.
      Note that you can still select the text on the the elements, even while they are rotating. Transforms elements remain
        fully interactive.</p>
    <p>Click Toggle Shape to switch between nested cubes and one big ring. Note how the planes move smoothly to their new locations,
      even while the whole shape is rotating. You can even interrupt this transition by clicking again, and they move back smoothly.</p>
    <p>Toggle the Backfaces Visible checkbox to turn backfaces on and off using <code>-webkit-backface-visibility</code>.</p>
    <div><button οnclick="toggleShape()">Toggle Shape</button></div>
    <div><input type="checkbox" id="backfaces" οnclick="toggleBackfaces()" checked><label for="backfaces">Backfaces visible</label></div>
  </div>

  <div id="container">
    <div id="stage">
      <div id="shape" class="cube backfaces">
        <div class="plane one">1</div>
        <div class="plane two">2</div>
        <div class="plane three">3</div>
        <div class="plane four">4</div>
        <div class="plane five">5</div>
        <div class="plane six">6</div>
        <div class="plane seven">7</div>
        <div class="plane eight">8</div>
        <div class="plane nine">9</div>
        <div class="plane ten">10</div>
        <div class="plane eleven">11</div>
        <div class="plane twelve">12</div>
      </div>
    </div>
  </div>
  
</body>
</html>

莫兰迪不会没有瓶子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
three.js正方体
twxwjh的博客
07-05 601
three.js正方体 var scene=new THREE.Scene(); //创建场景 var camera=new THREE.PerspectiveCamera(75, window.innerWidth/400, 0.1, 1000); //创建相机 var renderer=new THREE.WebGLRenderer({antialias:true, alpha:true}); renderer.setSize(window.innerWidth, 400); //创建渲染器 docum
javascript实现的三维正方体(兼容ie7,ff)
10-30
javascript实现的三维正方体(兼容ie7,ff)
js转动的正方体，立体
12-06
js转动的正方体，立体，可停止，向下转动，向左右转动
CSS3转换 transform
qq_52301431的博客
04-01 741
目录 一、CSS3转换 transform 2D转换 translate() 平移 rotate() 旋转 scale() 放大缩小 skew() 倾斜 3D转换 1、rotateX(80deg)：正值向上翻转 2、rotateY(180deg)：正值向右翻转 3、translateZ(100px)：正值向前，负值向后 透视原理： 近大远小 。 一、CSS3转换 transform CSS3 转换是使元素改变形状、尺寸和位置的一种效果。 转换可以对元素进行 移动tran
使用CSS写正方体，结合JS实现3D轮播图
baidu_41604826的博客
04-24 1286
立体轮播图 代码+界面呈现 HTML <div class="pox"> <ul class="box"> <li class="one"><img src="./img/img1.jpg" alt=""></li> <li class="two"><img ...
HTML5 CSS3 诱人的实例： 3D立方体旋转动画
weixin_30425949的博客
06-24 1124
转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/34120047 创意来自：http://www.html5tricks.com/demo/html5-3d-cube/index.html ， 同学给我发的例子，感觉很不错，不过实在想不出来实际的用处，但是效果很炫~ 效果图： 知识点： 1、perspect...
js实现正方体旋转动画
weixin_44786578的博客
05-14 989
效果： <!doctype html> <html> <head> <meta charset="utf-8"> <title>正方体旋转动画</title> <style> *{ margin:0 auto; padding:0; } html{ background:#222; } div.wrap{ width:200px;
ThreeJS入门-创建一个正方体
Baker的博客
09-16 446
ThreeJs实际上是WebGL的框架，Three.js是在WebGL的api接口基础上，又进行的一层封装。相当于js和JQuery的关系，学习webgl需要图形学知识，而webgl需要通过js和glsl两种语言。创建一个3D场景有几个要素：场景：就是用于展示的空间，相机：就是模拟观察者看到得景象可以理解为人眼，渲染器：渲染器根据相机，场景内模型去把要展示的画面渲染出来，光源：添加了光的3D场景才能看得到，不然就像夜晚一样，虽然有东西了但是太黑看不到。下面源码展示如何创建一个正方体，相关注释已经加入了。
threeJs画正方体
qq_40994735的博客
10-24 1901
Three.js中的基本概念 Three.js包含3个基本概念：场景（Scene）、相机（Camera）和渲染器（Renderer）。场景就是需要绘制的对象，相机代表取景的视角，渲染器是绘制的载体（可以挂靠到浏览器的DOM元素中），也就是我们通过相机拍摄场景然后绘制到目标介质中去。 具体代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="view
threejs正方体六面贴图
weixin_41824429的博客
09-05 1105
给正方体六面贴上不同纹理 最终效果 目录结构 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial
正方体OBJ文件
11-15
正方体OBJ文件，opengl作业，自己写的正方体obj文件。
利用three.js画一个3D立体的正方体示例代码
11-29
这篇文章仅是一个入门篇，介绍如何绘制一个3D正方体。 Three.js中的基本概念 Three.js包含3个基本概念：场景（Scene）、相机（Camera）和渲染器（Renderer）。 场景就是需要绘制的对象，相机代表取景的视角，渲染器...
2024年欧洲铝桁架市场主要企业市场占有率及排名.docx
07-17
2024年欧洲铝桁架市场主要企业市场占有率及排名.docx
torchaudio-0.13.1+cpu-cp39-cp39-win_amd64.whl
最新发布
07-17
torchaudio软件包，直接下载下来，通过命令窗口输入：pip install torchaudio-xxx.whl安装就行，再也不怕pip安装timeout了
出入库存盘点表-图表分析-分类查询-Excel模板
07-17
【作品名称】：出入库存盘点表-图表分析-分类查询-Excel模板 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
torchaudio-0.12.1+cpu-cp37-cp37m-win_amd64.whl
07-17
torchaudio软件包，直接下载下来，通过命令窗口输入：pip install torchaudio-xxx.whl安装就行，再也不怕pip安装timeout了
threejs实现正方体代码
09-19
three.js 的正方体代码很容易实现，可以使用以下代码：var geometry = new THREE.BoxGeometry(1,1,1); var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); var cube = new THREE.Mesh( geometry, ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值