Verwandte Themen

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
Gedanken939
03.11.2020, 10:20
Procreate Leinwand?

Guten Morgen,

Ich nutze seit gestern die App Procreate auf dem IPad. Ich habe einen Hintergrund für eine Website gezeichnet und dieser muss in einen vorgegebenen Rahmen.

Als mein Werk fertig war, habe ich also den Rahmen eingefügt und in die vorgegebene Größe gebracht (2106x940). Das allein war schon ein Kampf, denn Procreate stellt immer automatisch nach und hat den Rahmen oft anders verzogen, beispielsweise auf 2106x941. Wie kann ich ausstellen, dass Procreate meine angegebene Größe manipuliert?

Nun habe ich es aber doch geschafft und der Rahmen hat genau 2106x940. Nächstes Problem: die Leinwand, die ja größer ist, als Bild und Rahmen. Ich hatte gehofft, ich kann die Leinwand einfach ausschneiden, bzw. löschen, sodass mein Bild und der Rahmen die Größe bestimmen. Leider habe ich nicht rausfinden können ob und wie das geht. Weiß das jemand?

Denn wenn ich die Leinwand beschneide, auf 2106x940, schneidet sie immer teile des Rahmen ab, auch wenn ich versuche exakt zu arbeiten. Überhaupt ist es mit der Hand kaum möglich den Rahmen exakt zu platzieren. Was kann ich also tun?

Der Rahmen muss exakt die Maße 2106x940 haben und die Leinwand darf logischerweise nicht darüber hinausragen. Auch darf am Rahmen nichts verändert werden.

Ich sitze seit Stunden dran, finde aber keine Lösung für mein Problem. Ich wäre sehr dankbar für eure Ratschläge.

Liebe Grüße

App, Kunst, Malerei, malen, iPad, Programm, Leinwand, Procreate, Procreate App
1 Antwort

Meistgelesene Beiträge zum Thema Programm

Mehr meistgelesene Fragen zu Programm