HTML5绘制在立方体上的几何曲线图形

Lissajous shapes on a cube 立方体由6个canvas元素组装而成，本例可以用来学习多个canvas的操作。

canvas, cube

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2093
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    background: #222;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    -webkit-filter: blur(1px);
    filter: blur(1px);
    box-sizing: border-box;
    -webkit-perspective: 3000px;
    perspective: 3000px;
}
.cube {
    position: absolute;
    width: 250px;
    height: 250px;
    top: 50%;
    left: 50%;
    margin: -125px -125px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: rotateX(-30deg) rotateY(45deg);
    transform: rotateX(-30deg) rotateY(45deg);
    -webkit-animation: rotation 30s linear infinite;
    animation: rotation 30s linear infinite;
}
.cube div,
.cube canvas {
    width: 246px;
    height: 246px;
    position: absolute;
    border: 2px solid white;
    background: #000;
}
.cube .left {
    -webkit-transform: rotateY(-90deg) translateZ(125px);
    transform: rotateY(-90deg) translateZ(125px);
}
.cube .right {
    -webkit-transform: rotateY(90deg) translateZ(125px);
    transform: rotateY(90deg) translateZ(125px);
}
.cube .back {
    -webkit-transform: rotateY(180deg) translateZ(125px);
    transform: rotateY(180deg) translateZ(125px);
}
.cube .front {
    -webkit-transform: rotateX(0deg) translateZ(125px);
    transform: rotateX(0deg) translateZ(125px);
}
.cube .top {
    -webkit-transform: rotateX(90deg) translateZ(125px);
    transform: rotateX(90deg) translateZ(125px);
}
.cube .bottom {
    -webkit-transform: rotateX(-90deg) translateZ(125px);
    transform: rotateX(-90deg) translateZ(125px);
}
@-webkit-keyframes rotation {
    0% {
        -webkit-transform: rotateX(-30deg) rotateY(45deg);
        transform: rotateX(-30deg) rotateY(45deg);
    }
    100% {
        -webkit-transform: rotateX(330deg) rotateY(405deg);
        transform: rotateX(330deg) rotateY(405deg);
    }
}
@keyframes rotation {
    0% {
        -webkit-transform: rotateX(-30deg) rotateY(45deg);
        transform: rotateX(-30deg) rotateY(45deg);
    }
    100% {
        -webkit-transform: rotateX(330deg) rotateY(405deg);
        transform: rotateX(330deg) rotateY(405deg);
    }
}

HTML

Lissajous shapes on a cube 立方体由6个canvas元素组装而成，本例可以用来学习多个canvas的操作。

canvas, cube

编辑器支持Emmet

快捷键

Lissajous shapes on a cube 立方体由6个canvas元素组装而成，本例可以用来学习多个canvas的操作。

canvas, cube

在HTML5 Canvas上绘制随机山脉图

在HTML5 Canvas 2D上绘制云雾中的电流动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：