Verwandte Themen

Frage
von Abbasdas
04.11.2020, 23:36
CSS 3D-Würfel: Wie kann ich die Rückseite so wie die anderen Würfelseiten bewegen lassen?

Ich habe einen 3D-Würfel per CSS erstellt und würde ihm nun gerne eine 3D-Animation beim Hovern verleihen.

An sich komme ich auf das richtige Ergebnis, aber irgendwie verstehe ich die Rotation der Rückseite nicht und würde gerne wissen, wie ich sie so wie die anderen Würfelseiten bewegen lasse und nicht über diese komische Seitwärtsbewegung. Beziehungsweise ich möchte wissen, weswegen es bei rotateX überhaupt eine Seitwärtsbewegung durchführt.

Hier der Code:

HTML:

<div class="scene">
  <div class="cube">
    <div class="cube__face cube__face--front"></div>
    <div class="cube__face cube__face--back">back</div>
    <div class="cube__face cube__face--right">right</div>
    <div class="cube__face cube__face--left">left</div>
    <div class="cube__face cube__face--top">top</div>
    <div class="cube__face cube__face--bottom">bottom</div>
  </div>
</div>

CSS:

.scene {
  width: 200px;
  height: 200px;
  border: 1px solid #CCC;
  margin: 80px;
  perspective: 400px;
  transition-duration: 1s
}

.cube {
  transition-duration: 1s;
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(-100px);
}

.scene:hover .cube {
  transform: translateZ(-10px);
}

.cube__face {
  ;
  border: 3px solid black;
  position: absolute;
  width: 200px;
  height: 200px;
  color: white;
  font-size: 2.5em;
  transform: scale(2.5);
  text-align: center;
  font-weight: bold;
  line-height: 200px;
  transform: perspective(500px) translateZ(250px)
}

.cube__face--front {
  transition-duration: 1s;
  transform: rotateY(0deg) translateZ(100px);
  background: url(Gesichr.png) hsla(214, 100%, 46%, 0.7);
  opacity: 0.5;
  background-size: cover;
}

.cube__face--right {
  transition-duration: 1s;
  transform: rotateY(90deg) translateZ(100px);
  background: hsla(99, 100%, 36%, 0.7);
}

.cube__face--back {
  transition-duration: 1s;
  transform: rotateY(180deg) translateZ(100px);
  background: hsla(63, 99%, 59%,0.7)
}

.cube__face--left {
  transition-duration: 1s;
  transform: rotateY(-90deg) translateZ(100px);
  background: hsla(10, 100%, 50%, 0.7)
}

.cube__face--top {
  transition-duration: 1s;
  transform: rotateX(90deg) translateZ(100px);
  background: hsla(181, 100%, 67%,0.8)
}

.cube__face--bottom {
  transition-duration: 1s;
  transform: rotateX(-90deg) translateZ(100px);
  background: hsla(38, 100%, 52%,0.7)
}

.scene:hover .cube__face--front {
  transform: rotatex(-30deg) translateZ(100px);
}

.scene:hover .cube__face--right {
  transform: rotateY(90deg) translateZ(100px) rotatez(-30deg);
}

.scene:hover .cube__face--back  {
  transform: rotateY(0deg) rotateX(150deg) translateZ(100px) rotate(-180deg);
}

.scene:hover .cube__face--left {
  transform: rotateY(-90deg) translateZ(100px) rotatez(30deg);
}

.scene:hover .cube__face--top  {
  transform: rotateX(60deg) translateZ(100px);
}

.scene:hover .cube__face--bottom {
  transform: rotateX(-120deg) translateZ(100px);
}
Programm, HTML, 3D, programmieren, CSS, Code, Webdesign
1 Antwort
Frage
von AnonymousX63
19.08.2020, 14:48
Seltsamer Codierung?

Könnt ihr mir sagen was dieser Code heißen soll und könnt ihr ihn für mich lesen? Ich danke euch schon mal in voraus hier der Code.

1000) {
    r = r.substring(0, r.length - 1);
}
return r;
}());
}
var ftDomain = (window == top) ? "" : (function() {
    var d = document.referrer,
        h = (d) ? d.match("(?::q/q/)+([qw-]+(q.[qw-]+)+)(q/)?".replace(/q/g, decodeURIComponent("%" + "5C")))[1] : "";
    return (h && h != location.host) ? "&ft_ifb=1&ft_domain=" + encodeURIComponent(h) : "";
}());
var ftV_4678289 = {
        pID: "4678289",
        width: "300",
        height: "600",
        params: {
            ftx: window.ftX,
            fty: window.ftY,
            ftadz: window.ftZ,
            ftscw: window.ftContent,
            ft_custom: window.ftCustom,
            ft_id: window.ftID || "",
            ft_idEnabled: window.ftIDEnabled || "",
            ftOBA: window.ftOBA,
            ft_domain: ((ftDomain || "")
                .match(RegExp("&ft_domain=([^&$]+)", "i")) || ["", ""])[1],
            ft_ifb: ((ftDomain || "")
                .match(RegExp("&ft_ifb=([^&$]+)", "i")) || ["", ""])[1],
            ft_agentEnv: window.mraid || window.ormma ? "1" : "0",
            ft_referrer: encodeURIComponent(window.ft_referrer),
            cachebuster: window.ftRandom
        },
        winVars: {
            ftClick_4678289: window.ftClick_4678289,
            ftExpTrack_4678289: window.ftExpTrack_4678289,
            ft300x600_OOBclickTrack: window.ft300x600_OOBclickTrack
        },
        DTimeout: 1E3,
        GTimeout: 1E3
    },
    ◇ftPProc = function(d) {
        var c = this;
        d = JSON.parse(JSON.stringify(d));
        var☆ f = [],
            l = function(a, b) {
                b = "undefined" === typeof b || isNaN(b) ? 1 : parseInt(b, 10);
                a = a || "";
                for (var e = 0 <= b ? b : 0; e--;) a = encodeURIComponent(a);
                return

LÖSE DEN CODE X a
}, h = function(a) {
        a = a.constructor == Array ? a : [];
        for (var b = 0; b

Dieser Code heißt anscheinend Code X oder was auch immer. Danke schon mal in voraus.

AnonymousX63

PC, Internet, IT, programmieren, JavaScript, Codierung, Webdesign
1 Antwort
Frage
von KnowHow1001
15.05.2020, 14:45
Mit Bildern
Mit Links
Basic HTML Kästchen positionieren?

Hey.

Also ich weiß, dass es bei HTML divs gibt die sozusagen Blöcke sind die man mit Eigenschaften versehen kann via CSS.

nun wollte ich ein einfaches web layout gestalten aber scheitere daran, dass ich divisions einmal rechtsbündig und einmal linksbündig zentriere mit nem abstand dazwischen

wie ihr sehen könnt habe ich es dann zusammen gepfuscht bekommen sodass die abstände halbwegs passen.

gibt es da einen besseren zugang ? Bitte nur Tipps will selbst auf die Lösung kommen :)

bin auch schon am Überlegen den Code komplett neu zu schreiben :)

habe euch ein bild vom layout gemacht. dachte eigentlich ich mache für jedes kästchen eine eigene div umgeben von einer master div welche die komplette breite bestimmen soll.

und darin dann eben die einzelnen divs entweder zentrieren oder rechts / links

nur weil ich eben 2 kästchen in einer reihe habe dachte ich daran es mit einem table zu lösen und in der tr dann eben 2x TD damit die divs nebeneinander sein können

nicht geklappt. hab eigentlich schon so ziemlich alles probiert. divs hinzufügen, entfernen und über css habe ich versucht einzelne elemente zu manipulieren etc.

haut leider nicht hin.

Was meint ihr zu den bilder crop und größen veränderung. ich weiß man könnte es mit photoshop auf die entsprechende größé trimmen aber ich wollte es mit html/css schaffen :)

habe auch versucht den code Schön zu machen als "Lesbar", was hält ihr davon?

HTML

http://pastie.org/p/2vfSJIRfb5QSHBNQciATWO

Header CSS

http://pastie.org/p/6wEHhhZQWKYwwfC2RSxof3

Mainstyle CSS

http://pastie.org/p/5gFxKIEBpI0f5dlimjen9X

Footer CSS

http://pastie.org/p/5oUkLA58gIJ8cgWjw6gGTq

lg

Bild zu Frage
Computer, HTML, programmieren, CSS, Webdesign
3 Antworten

Meistgelesene Fragen zum Thema Webdesign
Mehr meistgelesene Fragen zu Webdesign