CSS3 realisiert den verschiebbaren Zauberwürfel-3D-Effekt

<div Klasse="Container">
        <div Klasse="Box Standard">
            <div class="pic"><img src="./img/cat.jpg" alt=""></div>
            <div class="pic"><img src="./img/dog.jpg" alt=""></div>
            <div class="pic"><img src="./img/elephant.jpg" alt=""></div>
            <div class="pic"><img src="./img/lion.jpg" alt=""></div>
            <div class="pic"><img src="./img/rabbit.jpg" alt=""></div>
            <div class="pic"><img src="./img/monkey.jpg" alt=""></div>
        </div>
    </div>
    <h1>Klicken Sie zum Wechseln auf die Bildschaltfläche unten</h1>
    <div Klasse="btn">
        <input Typ="Bild" Klasse="1" src="./img/cat.jpg">
        <input Typ="Bild" Klasse="2" src="./img/dog.jpg">
        <input Typ="Bild" Klasse="3" src="./img/elephant.jpg">
        <input Typ="Bild" Klasse="4" src="./img/lion.jpg">
        <input Typ="Bild" Klasse="5" src="./img/Kaninchen.jpg">
        <input Typ="Bild" Klasse="6" src="./img/monkey.jpg">
    </div>

   * {
        Rand: 0;
        Polsterung: 0;
    }
    html,
    Körper {
        Breite: 100 %;
        Höhe: 100%;
        Hintergrund: #66677c;
        Textausrichtung: zentriert;
    }
    .container {
        Breite: 300px;
        Höhe: 300px;
        Rand: 50px, automatisch 150px;
        Perspektive: 1200px;
    }
    .Container .Box {
        Breite: 300px;
        Höhe: 300px;
        Position: relativ;
        Transformationsstil: 3D bewahren;
        Übergang: Transformation 0,5 s;
    }
    .container .box .bild {
        Position: absolut;
        links: 0;
        oben: 0;
        Breite: 300px;
        Höhe: 300px;
        Kastenschatten: 0px 0px 5px #fff;
    }
    .container .box .bild img {
        Breite: 100 %;
        Höhe: 100%;
        Cursor: Zeiger;
    }
    .container .box .pic:n-tes-Kind(1) {
        transformieren: übersetzenZ(150px);
    }
    .container .box .pic:nth-child(2) {
        transformieren: Y drehen (-180 Grad) Z verschieben (150px);
    }
    .container .box .pic:nth-child(3) {
        transformieren: Y drehen (90 Grad) Z verschieben (150 Pixel);
    }
    .container .box .pic:n-tes-Kind(4) {
        transformieren: Y drehen (-90 Grad) Z verschieben (150px);
    }
    .container .box .pic:n-tes-Kind(5) {
        transformieren: rotierenX(90 Grad) übersetzenZ(150px);
    }
    .container .box .pic:nth-child(6) {
        transformieren: rotierenX(-90 Grad) übersetzenZ(150px);
    }
    h1 {
        Farbe: #fff;
        Schriftgröße: 30px;
        Rand unten: 30px;
    }
    .btn {
        Anzeige: Raster;
        Inhalt ausrichten: zentriert;
        Rastervorlagenspalten: 100px 100px 100px;
        Rastervorlagenzeilen: 100px 100px;
        Rasterabstand: 15px;
    }
    .btn Eingabe {
        Breite: 100px;
        Höhe: 100px;
        Gliederung: keine;
        Rand: 2px durchgezogen #fff;
    }
    .btn Eingabe:Fokus {
        Rand: 2px durchgezogen #e70;
    }
    .Standard {
        transformieren: verschiebeZ(-150px) dreheX(-10 Grad) dreheY(15 Grad);
    }
    .bild1 {
        transformieren: verschiebeZ(-150px) dreheX(0 Grad) dreheY(0 Grad);
    }
    .image2 {
        transformieren: verschiebeZ(-150px) dreheY(-180 Grad);
    }
    .bild3 {
        transformieren: verschiebeZ(-150px) dreheY(-90 Grad);
    }
    .image4 {
        transformieren: verschiebeZ(-150px) dreheY(90 Grad);
    }
    .image5 {
        transformieren: verschiebeZ(-150px) dreheX(-90 Grad);
    }
    .image6 {
        transformieren: verschiebeZ(-150px) dreheX(90 Grad);
    }

 (Funktion(){
        var btn = document.getElementsByClassName('btn')[0];
        var box = document.getElementsByClassName('box')[0];
        btn.addEventListener('klicken',Funktion(e){
            var Klassenname = e.Ziel.Klassenname;
            wenn(Klassenname !== 'btn'){
                box.stil = '';
                box.classList.replace(box.classList[1],'Bild'+Klassenname);
            }
        })
        //Maus-Drag-Effekt var xN = 10, yN = 15;
        document.addEventListener('mousedown',Funktion(e){
            e.preventDefault();
            e.stopPropagation();
            var x = e.clientX;
            var y = e.clientY;
            document.addEventListener('mousemove',bewegen);
            document.addEventListener('mouseup', hoch);
            Funktion verschieben(e){
                e.preventDefault();
                e.stopPropagation();
                var x1 = e.clientX;
                var y1 = e.clientY;
                xN += (x1 - x)*0,04;
                yN += (y1 - y)*0,04;
                box.style.transform = 'translateZ(-150px) rotateY(' + xN + 'Grad) rotateX(' + -yN + 'Grad)';
            }
            Funktion nach oben () {
                document.removeEventListener('mousemove', verschieben);
            }
        })
    })()