Cube 3D Html5 CSS3 en Javascript

Publié : janv. 04, 2015

Depuis un certain temps, j'expérimente la création d'objets 3D dans un navigateur Web classique sans recourir à des plugins tels que Flash, Silverlight, etc. Le Cube présenté ici est adapté d'un autre site Web 3D que j'ai créé précédemment.

WebGL nous permet de restituer des modèles 3D complexes dans un navigateur. Cependant, je vais ici chercher à créer un objet 3D en utilisant les différents CSS3 des commandes de transformation qui peuvent prendre un élément HTML 2D standard et le projeter dans un espace 3D.

L'avantage d'utiliser les transformations 3D sur des éléments HTML classiques est que vous pouvez projeter des éléments tels que du contenu Iframe, des images ou tout autre élément HTML en 3D, créant ainsi des effets vraiment soignés.

Aperçu en direct

Voici un exemple du cube utilisant quelques images et texte. Vous pouvez utiliser la souris pour faire tourner le cube.

Compatibilité

Comme le cube 3D présenté ici utilise les transformations matricielles CSS3 plutôt que les méthodes simples Rotate, Scale, Translate utilisées par certains autres cubes 3D, il fonctionne bien dans IE11. Outre IE11, il a été testé dans Firefox, Chrome, Safari et Mobile Safari pour iOS.

Source HTML

Le point important ici est que nous incluons le fichier "Cube.js". Nous avons aussi besoin de JQuery, cela est également inclus.

Le Div avec l'ID my3Dsurface contiendra notre cube 3D. Notez l'attribut data-facewidth="256". Ceci spécifie la taille des faces de notre cube.

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

Source Javascript

Ensuite, nous créons une instance de Js3DSurface et lui transmettons un tableau de contenu qui sera affiché sur chaque face de notre cube. Dans cet exemple, nous utilisons des images et du contenu HTML simple. Vous pouvez ajouter du HTML plus complexe tel que des Iframes, des balises vidéo, etc.

Nous ajoutons également 3 gestionnaires d'événements pour nous permettre de faire tourner le cube à l'aide de la souris. Lorsque la souris se déplace avec le bouton gauche de la souris enfoncé, nous appelons adjRot en lui transmettant les nouvelles positions X et Y de la souris.

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

Récupérez vous-même l'exemple de code à partir du lien ci-dessous et commencez à créer de superbes cubes HTML de projet 3D !

Téléchargement de fichier

Cliquez sur le lien ci-dessous pour télécharger le (s) fichier (s ) :

Cube 3D en CSS3: 3dcss3.zip (141,27kb)

Nous fournissons tous les fichiers tels quels, sans aucune garantie, pour une utilisation dans vos projets personnels. Ils ne peuvent être redistribués ou vendus sans autorisation.