h5 3D旋转立方体

来源：互联网发布：种子结构网络教研总结编辑：程序博客网时间：2024/05/26 05:53

本周是学习h5并制作一个相关的页面。我最初的想法是做一个骰子，然后还可以自己旋转。但是很遗憾得是没有实现，因为最开始我就直接在画布上画正方体，画了好久没成功。后来去找别人的实例，慢慢跟着学，最后做了一个旋转的立方体，但并不是骰子。

要用到的知识点主要是

1、perspective：透视

2、transform： rotate：旋转 translate：平移

3、@keyframes：实现动画

4、canvas：画布

首先准备六个正方形包裹在同一个父级容器里面，并且将父级容器设置为：transform-style: preserve-3d。这样接下来就可以对六个面进行3D转换。

把六个面都设置成绝对定位，那么就只能看到一个蓝色的正方形。

然后需要将父容器进行一定的旋转操作：transform: rotateX(-20deg) rotateY(-20deg);转换之后的图形如下：

接下来就可以对各个面进行3D变换了：

调整好角度和距离，就可以看到一个正方体了：

可以适当调整各个面的透明度以及父容器的旋转角度，是之看起来更加有立体感。

最后就是动画，其实动画比较简单，设置好其实和终止两个位置的状态就可以。

给立方体加上这个animation属性

一个周期的时间是6s,变化速度是线性（linear），并且无限循环（infinite）。

还可以用before 这个伪元素给每个面添加一个径向渐变：

到此为止，一个旋转的立方体是完成了的，但是并没有用到canvas，所以我给每个面都加入了一个canvas，用以绘制图片或文字，这个可以自由发挥。我选择的是绘制文字，为了看起来不那么单调，我用了渐变颜色笔去绘制。每个面的绘制过程都是这样，至多换换颜色，文字。这里需要强调的是<script>代码必须在<canvas>元素下面。

源码：

<!DOCTYPE html><html><head><meta charset="utf-8"><style>   {             background: radial-gradient(ellipse at center, #430d6d 0%, #000000 100%);             height: 500px;          }         .stage         {             perspective: 1000px;             width: 20em;             height: 20em;             left: 50%;             top: 50%;             margin-left: -10em;             margin-top: -10em;             position: absolute;         }           .cube         {             position: absolute;             width: 100%;             height: 100%;             transform-style: preserve-3d;             transform: rotateX(-20deg) rotateY(-20deg);         }           .cube *         {             position: absolute;             width: 100%;             height: 100%;             border: 2px solid rgba(54, 226, 248, 0.5);             box-shadow: 0 0 5em #fff;           }           .font         {             transform: translateZ(10em);         }           .back         {             transform: rotateX(180deg) translateZ(10em);         }           .left         {             transform: rotateY(-90deg) translateZ(10em);         }           .right         {             transform: rotateY(90deg) translateZ(10em);         }           .top         {             transform: rotateX(90deg) translateZ(10em);         }           .bottom         {             transform: rotateX(-90deg) translateZ(10em);         }        @keyframes spin         {             from             {                transform: translateZ(-10em) rotateX(0) rotateY(0deg);             }               to             {               transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);             }         }         .cube         {            animation: 6s spin linear infinite;            position: absolute;            width: 100%;            height: 100%;            transform-style: preserve-3d;            transform: rotateX(-20deg) rotateY(-20deg);          }         .cube *:before        {          display: block;          background: radial-gradient(center, ellipse, rgba(0, 0, 0, 0) 30%, rgba(0, 128, 0, 0.2) 100%);          background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 30%, rgba(0, 128, 0, 0.2) 100%);          content: '';          height: 100%;          width: 100%;          position: absolute;         }    </style></head><body>  <div class="stage">      <div class="cube">          <div class="font"><canvas id="canvas-1"></canvas></div>          <div class="back"><canvas id="canvas-2"></canvas></div>          <div class="left"><canvas id="canvas-3"></canvas></div>          <div class="right"><canvas id="canvas-4"></canvas></div>          <div class="top"><canvas id="canvas-5"></canvas></div>          <div class="bottom"><canvas id="canvas-6"></canvas></div>      </div></div><script> //正面    var c=document.getElementById("canvas-1");    var ctx=c.getContext("2d");    ctx.font="50px Verdana";// 创建渐变var gradient=ctx.createLinearGradient(0,0,c.width,0);gradient.addColorStop("0","magenta");gradient.addColorStop("0.5","blue");gradient.addColorStop("1.0","red");// 用渐变填色ctx.fillStyle=gradient;ctx.fillText("Hello!",100,100);//背面var c=document.getElementById("canvas-2");    var ctx=c.getContext("2d");    ctx.font="50px Verdana";// 创建渐变var gradient=ctx.createLinearGradient(0,0,c.width,0);gradient.addColorStop("0","magenta");gradient.addColorStop("0.5","blue");gradient.addColorStop("1.0","red");// 用渐变填色ctx.fillStyle=gradient;ctx.fillText("to",150,100);//左侧var c=document.getElementById("canvas-3");    var ctx=c.getContext("2d");    ctx.font="50px Verdana";// 创建渐变var gradient=ctx.createLinearGradient(0,0,c.width,0);gradient.addColorStop("0","magenta");gradient.addColorStop("0.5","blue");gradient.addColorStop("1.0","red");// 用渐变填色ctx.fillStyle=gradient;ctx.fillText("the",120,100);//右侧var c=document.getElementById("canvas-4");    var ctx=c.getContext("2d");    ctx.font="50px Verdana";// 创建渐变var gradient=ctx.createLinearGradient(0,0,c.width,0);gradient.addColorStop("0","magenta");gradient.addColorStop("0.5","blue");gradient.addColorStop("1.0","red");// 用渐变填色ctx.fillStyle=gradient;ctx.fillText("welcome",50,100);//上面var c=document.getElementById("canvas-5");    var ctx=c.getContext("2d");    ctx.font="50px Verdana";// 创建渐变var gradient=ctx.createLinearGradient(0,0,c.width,0);gradient.addColorStop("0","magenta");gradient.addColorStop("0.5","blue");gradient.addColorStop("1.0","red");// 用渐变填色ctx.fillStyle=gradient;ctx.fillText("magic",100,100);//下面var c=document.getElementById("canvas-6");    var ctx=c.getContext("2d");    ctx.font="50px Verdana";// 创建渐变var gradient=ctx.createLinearGradient(0,0,c.width,0);gradient.addColorStop("0","magenta");gradient.addColorStop("0.5","blue");gradient.addColorStop("1.0","red");// 用渐变填色ctx.fillStyle=gradient;ctx.fillText("world",100,100);    </script>    </body>  </html>

阅读全文

0 0