CSS
Transformacje 3D

Uwagi

Kostka 3D

Transformacji 3D można używać do tworzenia wielu kształtów 3D. Oto prosty przykład kostki 3D CSS:

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);
}

Zobacz ten przykład
W wersji demonstracyjnej dodano dodatkową stylizację, a po najechaniu myszką zastosowano transformację, aby wyświetlić 6 ścian sześcianu.

Należy zauważyć, że:

• 4 twarze wykonane są z pseudoelementów
• łańcuchowe transformacje są stosowane

widoczność z tyłu

Właściwość backface-visibility dotyczy transformacji 3D.

Dzięki przekształceniom 3D i właściwości backface-visibility możesz obrócić element w taki sposób, że oryginalny przód elementu nie jest już skierowany w stronę ekranu.

Na przykład spowoduje to odwrócenie elementu od ekranu:

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+ i IE 10+ obsługują backface-visibility bez prefiksu. Opera, Chrome, Safari, iOS i Android wymagają -webkit-backface-visibility .

Ma 4 wartości:

1. widoczny (domyślnie) - element będzie zawsze widoczny, nawet gdy nie jest skierowany w stronę ekranu.
2. ukryty - element nie jest widoczny, gdy nie jest skierowany w stronę ekranu.
3. dziedziczenie - właściwość otrzyma swoją wartość od elementu nadrzędnego
4. initial - ustawia właściwość na wartość domyślną, która jest widoczna

Wskaźnik kompasu lub kształt igły za pomocą transformacji 3D

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>

W powyższym przykładzie kształt wskaźnika igły lub kompasu jest tworzony przy użyciu transformacji 3D. Zasadniczo, gdy zastosujemy transformację rotate na elemencie, obrót odbywa się tylko w osi Z, a co najwyżej mamy tylko kształty diamentowe. Ale po rotateY transformacji rotateY Y element zostaje ściśnięty w osi Y, a zatem wygląda jak igła. Im większy obrót osi Y, tym bardziej ściśnięty wygląda element.

Wyjście z powyższego przykładu byłoby igłą spoczywającą na jej końcu. Aby utworzyć igłę spoczywającą na jej podstawie, obrót powinien przebiegać wzdłuż osi X zamiast wzdłuż osi Y. Zatem wartość właściwości transform musiałaby być taka jak rotateX(85deg) rotateZ(45deg); .

Pióro wykorzystuje podobne podejście do stworzenia czegoś, co przypomina logo Safari lub tarczę kompasu.

Zrzut ekranu elementu bez transformacji:

Zrzut ekranu elementu z tylko transformacją 2D:

Zrzut ekranu elementu z transformacją 3D:

Efekt tekstu 3D z cieniem

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;
}

Zobacz przykład z dodatkowym efektem aktywowania

W tym przykładzie tekst jest przekształcany tak, aby wyglądał, jakby trafiał na ekran z dala od użytkownika.

Cień jest odpowiednio przekształcany, aby podążał za tekstem. Ponieważ składa się z pseudoelementu i atrybutu data , dziedziczy przekształcenia z formy nadrzędnej (znacznik H1).

Białe „światło” składa się z pseudoelementu na elemencie #title . Jest przekrzywiony i używa promienia granicy zaokrąglonego rogu.