Cubo 3D Html5 CSS3 em Javascript

Postou: jan 04, 2015

Há algum tempo venho experimentando a criação de objetos 3D em um navegador normal sem recorrer a plug-ins como Flash, Silverlight etc. O Cubo mostrado aqui é adaptado de outro site 3D que fiz anteriormente.

WebGL nos permite renderizar modelos 3D complexos em um navegador. No entanto, aqui irei analisar a criação de um objeto 3D usando os vários CSS3 transform comandos que podem pegar um elemento HTML 2D regular e projetá-lo no espaço 3D.

A vantagem de usar transformações 3D em elementos HTML regulares é que você pode projetar coisas como conteúdo Iframe, imagens ou qualquer outro elemento HTML em 3D, criando alguns efeitos realmente interessantes.

Visualização ao vivo

Aqui está um exemplo do cubo usando algumas imagens e texto. Você pode usar o mouse para girar o cubo.

Compatibilidade

Como o cubo 3D mostrado aqui usa transformações de matriz CSS3 em vez dos métodos simples Rotate, Scale, Translate usados por alguns outros cubos 3D, ele funciona bem no IE11. Assim como o IE11, foi testado no Firefox, Chrome, Safari e Mobile Safari para iOS.

Fonte HTML

O importante aqui é incluir o arquivo “Cube.js”. Nos também precisamos JQuery, isso também está incluído.

O Div com o ID my3Dsurface conterá nosso cubo 3D. Observe o atributo data-facewidth="256". Isso especifica o tamanho das faces do nosso cubo.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Css3 3D Sample</title>
    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/cube.js"></script>
    <script src="js/sample.js"></script>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <div id="my3Dsurface" class="js3dsurface" data-facewidth="256"></div>
</body>
</html>

Fonte Javascript

A seguir criamos uma instância de Js3DSurface e passamos para ela um array de conteúdo que será exibido em cada face do nosso cubo. Neste exemplo estamos usando imagens e conteúdo HTML simples. Você pode adicionar HTML mais complexo, como Iframes, tags de vídeo, etc.

Também adicionamos 3 manipuladores de eventos para nos permitir girar o cubo usando o mouse. Quando o mouse se move com o botão esquerdo pressionado, chamamos adjRot passando a nova posição X e Y do mouse.

var cube;
var mouseisdown = false;

$(document).ready(function () {
    var faces = new Array();
    faces.push('<img src="images/manic-miner-willy.jpg" />');
    faces.push('<img src="images/terminator-t-800-head-design.png" />');
    faces.push('<div class="plain"><h1>3D Cube!</h1><p>Some plain html content to be projected onto the side of the cube! Works in the latest versions of Chrome, Firefox, IE, Safari, Safari Mobile and other Html5 modern browsers.</div>');
    faces.push('<img src="images/sinclair-c5.jpg" />');
    faces.push('<img src="images/terminator-t-800-head-design.png" />');
    faces.push('<img src="images/sinclair-c5.jpg" />');

    cube = new Js3DSurface("my3Dsurface", faces);

    cube._backSurface.addEventListener('mousemove', mousemove, false);
    document.body.addEventListener('mousedown', mousedown, false);
    document.body.addEventListener('mouseup', mouseup, false);
});

function mousedown(e) {
    mouseisdown = true;
    if (e != null) {
        e.stopPropagation();
        e.preventDefault();
    }

    returnfalse;
}

function mouseup(e) {
    mouseisdown = false;
    if (e != null) {
        e.stopPropagation();
        e.preventDefault();
    }
    returnfalse;
}

function mousemove(e) {
    if (mouseisdown) {
        var _off = $(cube._backSurface).offset();
        var x = e.clientX - _off.left;
        var y = e.clientY - _off.top;
        y += $(window).scrollTop();

        adjRot(x, y);
    }
}

function adjRot(x, y) {
    var w = $(cube._backSurface).width();
    var h = $(cube._backSurface).height();
    var step = 10;
    var ry = (((x - (w / 2)) / w) * step);
    var rx = (((y - (h / 2)) / h) * step);

    cube._cubes[0]._Torque._Y = ry;
    cube._cubes[0]._Torque._X = rx;
}

Pegue você mesmo o código de exemplo no link abaixo e comece a criar cubos HTML de projetos 3D legais!

Download do arquivo

Clique no link abaixo para baixar o (s) arquivo (s ):

Cubo 3D em CSS3: 3dcss3.zip (141,27kb)

Fornecemos todos os arquivos no estado em que se encontram, sem qualquer tipo de garantia, para uso em seus projetos pessoais. Eles não podem ser redistribuídos ou vendidos sem permissão.