Html5 CSS3 3D-Würfel in Javascript

Gesendet: Jan. 04, 2015

Ich experimentiere seit einiger Zeit mit der Erstellung von 3D-Objekten in einem normalen Webbrowser, ohne auf Plug-Ins wie Flash, Silverlight usw. zurückzugreifen. Der hier gezeigte Würfel ist einer anderen 3D-Website entnommen, die ich früher erstellt habe.

WebGL ermöglicht es uns, komplexe 3D-Modelle in einem Browser darzustellen. Hier werde ich jedoch die Erstellung eines 3D-Objekts mit den verschiedenen CSS3 Transformationsbefehle, die ein normales 2D-HTML-Element nehmen und es in den 3D-Raum projizieren können.

Der Vorteil der Verwendung von 3D-Transformationen auf reguläre HTML-Elemente besteht darin, dass Sie Dinge wie Iframe- Inhalte, Bilder oder andere HTML-Elemente in 3D projizieren und so einige wirklich tolle Effekte erzeugen können.

Live Vorschau

Hier ist ein Beispiel des Würfels mit einigen Bildern und Text. Sie können den Würfel mit der Maus drehen.

Kompatibilität

Da der hier gezeigte 3D-Würfel CSS3-Matrixtransformationen verwendet und nicht die einfachen Dreh-, Skalierungs- und Übersetzungsmethoden, die von einigen anderen 3D-Würfeln verwendet werden, funktioniert er gut in IE11. Er wurde nicht nur in IE11, sondern auch in Firefox, Chrome, Safari und Mobile Safari für iOS getestet.

HTML Quelle

Wichtig ist hier, dass wir die Datei "Cube.js" einbinden. Außerdem brauchen wir JQuery, das ist ebenfalls enthalten.

Das Div mit der ID my3Dsurface enthält unseren 3D-Würfel. Beachten Sie das Attribut data-facewidth="256". Dies gibt die Größe unserer Würfelflächen an.

<!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>

Javascript-Quelle

Als nächstes erstellen wir eine Instanz von Js3DSurface und übergeben ihr ein Array mit Inhalten, die auf jeder Seite unseres Würfels angezeigt werden. In diesem Beispiel verwenden wir Bilder und einfache HTML-Inhalte. Sie können komplexere HTML-Inhalte wie Iframes, Video-Tags usw. hinzufügen.

Wir fügen außerdem drei Eventhandler hinzu, die es uns ermöglichen, den Würfel mit der Maus zu drehen. Wenn sich die Maus mit gedrückter linker Maustaste bewegt, rufen wir adjRot auf und übergeben ihm die neue X- und Y-Position der Maus.

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;
}

Holen Sie sich den Beispielcode selbst über den unten stehenden Link und beginnen Sie mit der Erstellung cooler 3D-Projekt-HTML-Würfel!

Datei download

Klicken Sie auf den Link unten, um die Datei (en) herunterzuladen:

3D-Würfel in CSS3: 3dcss3.zip (141,27kb)

Wir stellen alle Dateien so wie sie sind und ohne jegliche Garantie zur Verfügung, damit Sie sie in Ihren eigenen persönlichen Projekten verwenden können. Sie dürfen ohne Genehmigung weder weitergegeben noch verkauft werden.