Suche…


Bemerkungen

Koordinatensystem

3D-Transformationen werden gemäß einem (x, y, z) -Koordinatensystem im euklidischen Raum durchgeführt .

Das folgende Bild zeigt ein Beispiel für Koordinaten im euklidischen Raum:

Euklidischer Raum

In CSS

  • Die x Achse repräsentiert die Horizontale (links und rechts)
  • Die y Achse repräsentiert die Vertikale (auf und ab)
  • Die z Achse repräsentiert die Tiefe (vorwärts und rückwärts / näher und weiter)

Das folgende Bild zeigt, wie diese Koordinaten in CSS übersetzt werden:

CSS 3D-Koordinatensystem

3D Würfel

3D-Transformationen können zum Erstellen vieler 3D-Formen verwendet werden. Hier ist ein einfaches Beispiel eines 3D-CSS-Cubes:

HTML:

<div class="cube">
  <div class="cubeFace"></div>
  <div class="cubeFace face2"></div>
</div>

CSS:

body {
  perspective-origin: 50% 100%;
  perspective: 1500px;
  overflow: hidden;
}
.cube {
  position: relative;
  padding-bottom: 20%;
  transform-style: preserve-3d;
  transform-origin: 50% 100%;
  transform: rotateY(45deg) rotateX(0);
}
.cubeFace {
  position: absolute;
  top: 0;
  left: 40%;
  width: 20%;
  height: 100%;
  margin: 0 auto;
  transform-style: inherit;
  background: #C52329;
  box-shadow: inset 0 0 0 5px #333;
  transform-origin: 50% 50%;
  transform: rotateX(90deg);
  backface-visibility: hidden;
}
.face2 {
  transform-origin: 50% 50%;
  transform: rotatez(90deg) translateX(100%) rotateY(90deg);
}
.cubeFace:before, .cubeFace:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
  background: inherit;
  box-shadow: inherit;
  backface-visibility: inherit;
}
.cubeFace:before {
  top: 100%;
  left: 0;
  transform: rotateX(-90deg);
}
.cubeFace:after {
  top: 0;
  left: 100%;
  transform: rotateY(90deg);
}

Dieses Beispiel anzeigen
In der Demo wird zusätzliches Styling hinzugefügt, und beim Schweben wird eine Transformation angewendet, um die 6 Flächen des Würfels anzuzeigen.

Sollte bemerkt werden, dass:

Sicht auf die Rückseite

Die backface-visibility bezieht sich auf 3D-Transformationen.

Mit 3D-Transformationen und der backface-visibility können Sie ein Element so drehen, dass die ursprüngliche Vorderseite eines Elements nicht mehr zum Bildschirm zeigt.

Dies würde beispielsweise ein Element vom Bildschirm wegklappen:

JSFIDDLE

<div class="flip">Loren ipsum</div>
<div class="flip back">Lorem ipsum</div>
.flip {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -webkit-backface-visibility: visible;
  -moz-backface-visibility:    visible;
  -ms-backface-visibility:     visible;
}

.flip.back {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility:    hidden;
  -ms-backface-visibility:     hidden;
}

Firefox 10+ und IE 10+ unterstützen die backface-visibility ohne Präfix. Opera, Chrome, Safari, iOS und Android benötigen alle die -webkit-backface-visibility .

Es hat 4 Werte:

  1. visible (Standardeinstellung) - Das Element ist immer sichtbar, auch wenn Sie nicht auf den Bildschirm gerichtet sind.
  2. ausgeblendet - das Element ist nicht sichtbar, wenn es nicht auf den Bildschirm gerichtet ist.
  3. vererben - Die Eigenschaft erhält ihren Wert vom übergeordneten Element
  4. initial - setzt die Eigenschaft auf ihren Standard, der sichtbar ist

Kompasszeiger oder Nadelform mithilfe von 3D-Transformationen

CSS

div.needle {
  margin: 100px;
  height: 150px;
  width: 150px;
  transform: rotateY(85deg) rotateZ(45deg);
  /* presentational */
  background-image: linear-gradient(to top left, #555 0%, #555 40%, #444 50%, #333 97%);
  box-shadow: inset 6px 6px 22px 8px #272727;  
}

HTML

<div class='needle'></div>

Im obigen Beispiel wird eine Nadel- oder Kompasszeigerform mithilfe von 3D-Transformationen erstellt. Wenn wir die rotate auf ein Element anwenden, geschieht die Rotation im Allgemeinen nur in der Z-Achse, und im besten Fall erhalten wir nur Rauten. Wenn jedoch eine rotateY Transformation hinzugefügt wird, rotateY sich das Element in der Y-Achse und sieht somit aus wie eine Nadel. Je mehr die Y-Achse gedreht wird, desto stärker wirkt das Element.

Die Ausgabe des obigen Beispiels wäre eine Nadel, die auf ihrer Spitze ruht. Zum Erstellen einer Nadel, die auf ihrer Basis ruht, sollte die Rotation entlang der X-Achse und nicht entlang der Y-Achse erfolgen. Der Wert der transform müsste also so etwas wie rotateX(85deg) rotateZ(45deg); .

Dieser Stift verwendet einen ähnlichen Ansatz, um etwas zu kreieren, das dem Safari-Logo oder einem Kompasszifferblatt ähnelt.

Screenshot eines Elements ohne Transformation:

Geben Sie hier die Bildbeschreibung ein

Screenshot eines Elements mit nur 2D-Transformation:

Geben Sie hier die Bildbeschreibung ein

Screenshot eines Elements mit 3D-Transformation:

Geben Sie hier die Bildbeschreibung ein

Effekt des Textes 3D mit Schatten

HTML:

<div id="title">
  <h1 data-content="HOVER">HOVER</h1>
</div>

CSS:

*{margin:0;padding:0;}
html,body{height:100%;width:100%;overflow:hidden;background:#0099CC;}
#title{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  perspective-origin:50% 50%;
  perspective:300px;
}
h1{
  text-align:center;
  font-size:12vmin;
  font-family: 'Open Sans', sans-serif;
  color:rgba(0,0,0,0.8);
  line-height:1em;
  transform:rotateY(50deg);
  perspective:150px;
  perspective-origin:0% 50%;
}
h1:after{
  content:attr(data-content);
  position:absolute;
  left:0;top:0;
  transform-origin:50% 100%;
  transform:rotateX(-90deg);
  color:#0099CC;
}
#title:before{
  content:'';
  position:absolute;
  top:-150%; left:-25%;
  width:180%; height:328%;
  background:rgba(255,255,255,0.7);  
  transform-origin: 0 100%;
  transform: translatez(-200px) rotate(40deg) skewX(35deg);
  border-radius:0 0 100% 0;
}

Beispiel mit zusätzlichem Hover-Effekt anzeigen

Effekt des Textes 3D mit Schatten

In diesem Beispiel wird der Text so umgewandelt, dass er aussieht, als würde er vom Benutzer weg auf den Bildschirm gehen.

Der Schatten wird entsprechend transformiert, sodass er dem Text folgt. Da es mit einem Pseudoelement und dem data wird, erbt es die Transformationen von ihrem übergeordneten Element (dem H1-Tag).

Das weiße "Licht" wird mit einem #title Element #title . Es ist schief und verwendet den Randradius für die abgerundete Ecke.



Modified text is an extract of the original Stack Overflow Documentation
Lizenziert unter CC BY-SA 3.0
Nicht angeschlossen an Stack Overflow