3D渐变颜色矩阵

鼠标悬停上去显示RBG值。

jQuery, cube

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

function move(x, y) {
    MW = $('#bg').width() / 2;
    MH = $('#bg').height() / 2;
    rx = parseInt($("#offx").val()) + (x / MW * 4);
    ry = parseInt($("#offy").val()) + (-y / MH * 4);
    $('#container').css({
        transform: 'rotateX(' + ry + 'deg) rotateY(' + rx + 'deg)'
    });
}

编译

CSS

html,
body {
    margin: 0;
    background: radial-gradient(#ccc, #333);
    font-family: verdana
}
#bg {
    position: relative;
    width: 100%;
    height: 100vh;
    transform-style: preserve-3d;
    perspective: 800px;
    transform: translateZ(-100px)
}
#controls {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10
}
label {
    position: relative;
    padding: 0 5px;
    background: #666;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    font-size: 11px;
    height: 30px;
    line-height: 30px;
    display: block;
    width: 50px;
    float: left;
    clear: left;
    text-align: right
}
input {
    position: relative;
    float: left;
    height: 30px;
    line-height: 30px;
    padding: 0 5px;
    box-sizing: border-box;
    border: 3px solid #666;
    width: 50px;
    outline: none
}
#container {
    position: absolute;
    width: 250px;
    height: 250px;
    top: 50%;
    left: 50%;
    margin: -125px 0 0 -125px;
    transform-origin: center center;
    transform-style: preserve-3d;
    transform: translateZ(500px)
}
.plan {
    position: absolute;
    top: 0;
    left: 0;
    width: 250px;
    height: 250px;
}
.row {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px
}
.item {
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
}
#cntText {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 1
}
#text {
    position: absolute;
    left: 0;
    top: 50px;
    text-align: center;
    width: 100%;
    height: 100px;
    line-height: 100px;
    letter-spacing: -15px;
    text-transform: uppercase;
    font-size: 100px;
    font-weight: 700;
    color: rgba(127, 127, 127, 0.8);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5), 0 -1px 2px rgba(0, 0, 0, 0.5)
}

HTML

鼠标悬停上去显示RBG值。

jQuery, cube

编辑器支持Emmet

快捷键

鼠标悬停上去显示RBG值。

jQuery, cube

Three.js 3D暗红色水晶体阵列

Glutz.js WebGL 彩虹渐变透明色立方体

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：