h5|h5 3D旋转立方体

本周是学习h5并制作一个相关的页面。我最初的想法是做一个骰子,然后还可以自己旋转。但是很遗憾得是没有实现,因为最开始我就直接在画布上画正方体,画了好久没成功。后来去找别人的实例,慢慢跟着学,最后做了一个旋转的立方体,但并不是骰子。
要用到的知识点主要是
【h5|h5 3D旋转立方体】1、perspective:透视
2、transform:rotate:旋转translate:平移
3、@keyframes: 实现动画
4、canvas: 画布




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


把六个面都设置成绝对定位,那么就只能看到一个蓝色的正方形。
然后需要将父容器进行一定的旋转操作:transform: rotateX(-20deg) rotateY(-20deg); 转换之后的图形如下:
h5|h5 3D旋转立方体
文章图片

接下来就可以对各个面进行3D变换了:
h5|h5 3D旋转立方体
文章图片

h5|h5 3D旋转立方体
文章图片

调整好角度和距离,就可以看到一个正方体了:
h5|h5 3D旋转立方体
文章图片

可以适当调整各个面的透明度以及父容器的旋转角度,是之看起来更加有立体感。
最后就是动画,其实动画比较简单,设置好其实和终止两个位置的状态就可以。
h5|h5 3D旋转立方体
文章图片

给立方体加上这个animation属性
h5|h5 3D旋转立方体
文章图片

一个周期的时间是6s,变化速度是线性(linear),并且无限循环(infinite)。
还可以用before 这个伪元素给每个面添加一个径向渐变:
h5|h5 3D旋转立方体
文章图片

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



    推荐阅读