Stereoskopowy CSS

Przez jakiś czas blogowałem o tworzeniu różnego rodzaju efektów 3D przy wykorzystaniu CSS. W tym artykule pójdę o krok dalej i spróbuje sprawić, że ujęcia będą wyglądały bardziej trójwymiarowo.

Zobacz demo stereoskopowego sześcianu.

Stereoskopowe

Istnieje wiele technik używanych do wydobycia z ekranu obrazu 3D. Jedną z najstarszych jest zastosowanie czerwonego i zielonego (lub niebieskiego) filmu, który oglądany przez czerwone/zielone okulary tworzy efekt 3D. 

[Simurai[ włożył w to trochę pracy i stworzył świetną wtyczkę o nazwie CSS3D, aby to osiągnąć.

Wadą tego rozwiązania jest to, że film może być tylko monochromatyczny, ponieważ kolory są ograniczone do tych wykorzystywanych do stworzenia efektu 3D.

Stereoskopia ramię w ramię

Drugim podejściem zaprezentowania 3D jest zastosowanie umiejętności, którą niektórzy z nas posiadają czyli skrzyżowania oczu. Pomysł polega na prezentacji dwóch ujęć ramię w ramię, każda przedstawiona z innej perspektywy. Jeśli widz może skrzyżować oczy, dwa obrazy łączą się tworząc efekt 3D.

Chociaż to nie zawsze działa, świetnie kiedy działa i nie ogranicza liczby kolorów, które zawiera ujęcie. Kilka fotografii, które ładnie pokazują ten efekt.

Aby spróbować, patrz na poniższy obraz z odległości około 60 centymetrów od monitora. Delikatnie skrzyżuj oczy aż dwa obrazy połączą się ze sobą i jeśli uda ci się wyrównać je prawidłowo, obraz powinien wyglądać jak 3D.

Ta technika podwójnych obrazów jest w szczególności używana w nowych okularach Oculus Rift. Nie posiadam ich, aby przetestować, ale sądzę, że jest możliwość wyświetlania stron w HTML, więc jakaś forma tej techniki może być tam przydatna.

Ostrzeżenie

To tylko mała uwaga, ale jeśli zamierzasz spędzić dużo czasu wpatrując się w ekran krzyżując oczy, możesz doświadczyć bólu głowy. Wiem, bo sam to robiłem. Jednak zdecydowanie warto!

Ustaw ujęcie

Zaczniemy od stworzenia prostego ujęcia 3D za pomocą HTML.

<div class="stage">
  <figure class="cube">
    <span class="back">S</span>
    <span class="top"></span>
    <span class="bottom"></span>
    <span class="left">3D!</span>
    <span class="right">S</span>
    <span class="front">C</span>
  </figure>
</div>

Mamy tutaj zawierający scenę div, która będzie działać jako scena, w której umieścimy sześcian, a niej figurę sześcianu. Sześcian składa się z 6 części.

"Scena" div jest potrzebna do ustanowienia przez przeglądarkę kilku ważnych ustawień związanych z 3D takich jak głębia ujęcia i kąt patrzenia na ujęcie. Te rzeczy ustawiamy za pomocą CSS.

.stage {
  width: 480px;
  height: 500px;
  margin: 10px auto;
  position: relative;
  perspective: 1600px;
}

CSS przedstawia scenę za pomocą kilku proporcji i wartości perspective. Perspektywa opisuje głębie ujęcia, małe wartości reprezentują bardziej ekstremalne rezultaty. W tym przypadku 1600 pikseli wygląda całkiem nieźle, ale możesz spróbować różnych wartości, aby zobaczyć jak wygląda ujęcie.

Budowanie sześcianu

Sześcian jest zbudowany z sześciu elementu. Korzystając z właściwości transform w CSS, możemy manipulować składowymi w przestrzeni 3D i umieścić je, gdzie chcemy. Jednakże najpierw musimy przekazać przeglądarce, że naszą intencją jest przemieszczanie elementów w przestrzeni 3D. Nasz kod CSS jest w stanie to osiągnąć.

.cube {
  transform-style: preserve-3d;
  transform-origin: 100px 50%;
  position: absolute;
  top: 120px;
  left: 140px;
}

Należy zwrócić tutaj na główne właściwości transform-style i transform-origin. Przekazują one przeglądarce, że ten i elementy podrzędne będą w stanie się przekształcać w kontekście "sceny" figure, jak również opisywać punkt względnie którego będzie przebiegać rotacja, skalowanie lub pochylanie.

Następnie musimy określić wymiary ścian sześcianu, a potem przenieść je na miejsce używając właściwości transform.

.cube span {
  color: white;
  display: block;
  font-size: 100px;
  height: 200px;
  line-height: 200px;
  opacity: 0.5;
  position: absolute;
  text-align: center;
  width: 200px;
}
.back {
  background-color: #f00;
  transform: rotateY(180deg) translateZ(100px);
}
.top {
  background-color: #ff7400;
  transform: rotateX(90deg) translateZ(100px);
}
.bottom {
  background-color: #aaa;
  box-shadow: 0 10px 100px rgba(0, 0, 0, 0.7);
  transform: rotateX(-90deg) translateZ(100px);
}
.left {
  background-color: #099;
  transform: rotateY(-90deg) translateZ(100px);
}
.right {
  background-color: #0c0;
  transform: rotateY(90deg) translateZ(100px);
}
.front {
  background-color: #ff0;
  transform: translateZ(100px);
}

Aby wszystko było bardziej czytelne, usunąłem tutaj prefiksy "-webkit" i "-moz" z właściwości transform.

Ten kod CSS opisuje ogólne zasady dla składowych, których szerokość wynosi na przykład 200 pikseli i posiada biały tekst. Zasady, które dotyczą obracania i pozycji każdej ściany wykorzystującej właściwość rotate i translate. Każda ściana posiada również kolor tła.

Tworzenie stereoskopii

Teraz gdy mamy ujęcie z obiektem 3D, możemy go sklonować i uczynić stereoskopowym. Rozpoczniemy kopiując kod HTML do tagu div left i right.

<div class="container">
  <div class="left">
    <div class="stage">
      <figure class="cube">
        <span class="back">S</span>
        <span class="top"></span>
        <span class="bottom"></span>
        <span class="left">3D!</span>
        <span class="right">S</span>
        <span class="front">C</span>
      </figure>
    </div>
  </div>

  <div class="right">
    <div class="stage">
      <figure class="cube">
        <span class="back">S</span>
        <span class="top"></span>
        <span class="bottom"></span>
        <span class="left">3D!</span>
        <span class="right">S</span>
        <span class="front">C</span>
      </figure>
    </div>
  </div>
</div>

Celem jest podzielenie ekranu na dwie części i umieszczenie dwóch sześcianów obok siebie. Ponownie skorzystamy z magii o nazwie CSS, aby osiągnąć cel.

.container {
  margin: 0 auto;
  width: 960px;
}

.left, .right {
  height: 100%;
  overflow: hidden;
  width: 50%;
}

.left {
  float: left;
}

.right {
  float: right;
}

Nasz przykład nie musi być wyświetlany na pełnym ekranie, więc ustawiłem go w kolumnie kontenera. Każdy tag div jest ustawiony na 50% szerokości i pływa odpowiednio na lewej i prawej stronie.

Teraz mamy dwa identyczne obiekty 3D. To nie koniec, ponieważ musimy dostosować je do różnych kątów dla każdego oka. Aby to wykonać, nadpiszemy każdą właściwość perspective-origin tagu stage.

.left .stage {
  perspective-origin: 63.5% -340px;
}

.right .stage {
  perspective-origin: 36.5% -340px;
}

Lewa scena otrzymała perspektywę około dwóch trzecich wzdłuż osi X, aby naśladować prawe oko, a prawa scena otrzymała wartość około jednej trzeciej. Poprawiłem je ręcznie, więc mogą wymagać dostosowania, aby działały zgodnie z twoim projektem.

Końcowy rezultat powinien zawierać dwie prawie identyczne ujęcia 3D w CSS w delikatnie różnych perspektywach.

Tutaj możesz obejrzeć animowaną stereoskopową wersję.

Make sure to follow on Twitter for all the latest updates!