CSS
3D-Transformationen

Bemerkungen

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:

• 4 Gesichter werden mit Pseudoelementen erstellt
• verkettete Transformationen werden angewendet

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:

Screenshot eines Elements mit nur 2D-Transformation:

Screenshot eines Elements mit 3D-Transformation:

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

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.