Objek segi tiga yang tak mungkin wujud di alam nyata

Penrose triangle

Segi tiga 'mustahil' (gambar). Ongputih panggil Penrose triangle. Ia adalah satu objek mustahil terdiri daripada satu bentuk segi tiga yang menampakkan satu ilusi optik seakan suatu objek pepejal namun hanya lukisan berunjuran yang boleh dilihat dari sudut pandangan tertentu sahaja.

Bentuk ini mula dilakarkan oleh Oscar Reutersvärd pada tahun 1934. Ia dipopularkan secara berasingan oleh anak-beranak Lionel Penrose dan Roger Penrose. Roger khususnya menggambarkan objek ilusi ini sebagai suatu 'impossibility in its purest form' (kemustahilan paling tulen).

Jika kita perhatikan gambar, kita akan menyedari bahawa bahagian atas dan bahagian bawah segi tiga tidak dapat ditentukan. Objek segi tiga sebegini tak mungkin wujud di alam nyata.

Namun begitu kita boleh melihat wujud objek 3D berbentuk seperti segi tiga, yang mana objek sebenarnya bukan segi tiga, dan bentuk segi tiga berkenaan hanya dapat dilihat dari satu sudut.

– Untuk lebih jelas, onmouse atau tap imej demo di bawah untuk mendapat gambaran sebenar – menunjukkan bahawa objek ini bukanlah segi tiga.

Demo

<div class="labu">
<div class="box">
  <div class="Penrose-box">
    <div class="di">
      <div class="s s-x">
        <div class="s s-y">
          <div class="s s-z"></div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>
<style>
  .labu *,
.labu *::before,
.labu *::after {
  box-sizing: border-box;
  margin: 0;
}
.labu {
  display: flex;
  flex-direction: column;
  min-height: 360px;
  margin: 0;
  background: #ffffff;
}
  .Penrose-box {
  position: relative;
  width: 15rem;
  height: 15rem;
}
.di {
  position: relative;
  position: absolute;
  bottom: 0;
  left: 3rem;
  width: 3rem;
  height: 3rem;
  transform-style: preserve-3d;
  transform: rotateX(-35.25deg) rotateY(44.95deg);
  transition: transform 2s;
}
.Penrose-box:hover .di {
  transform: rotateX(-35.25deg) rotateY(22.5deg);
}
.s {
  position: absolute;
  left: 0;
  top: 0;
  width: 15rem;
  height: 3rem;
  transform-style: preserve-3d;
  transform-origin: 0% 100%;
  background-image: linear-gradient(to left, transparent 3rem, currentColor);
}
.s::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform-origin: 50% 0%;
  transform: rotateX(-90deg);
  background-image: linear-gradient(to left, transparent 3rem, currentColor);
}
.s-x {
  color: #9c4057;
  background-color: #b76979;
}
.s-x::before {
  color: #dab2b0;
  background-color: #f1efe2;
}
.s-y {
  left: 1px;
  transform: rotateZ(-90deg);
  color: #882941;
  background-color: #9c4057;
  background-image: linear-gradient(-150deg, currentColor 2.595rem, transparent 3.24375rem);
}
.s-y::before {
  color: rgba(218, 178, 176, 0.75);
  background-color: #b76979;
}
.s-z {
  left: -1px;
  transform-origin: 100% 0%;
  transform: rotateY(90deg) translate3d(3rem, 0, 3rem);
  color: #f1efe2;
  background-color: #dab2b0;
}
.s-z::before {
  color: #b76979;
  background: linear-gradient(45deg, transparent 2.1213256871rem, currentColor 2.1213256871rem);
}
.s-z::after {
  content: "";
  position: absolute;
  width: 4.24263rem;
  height: 3rem;
  transform-origin: 0% 50%;
  transform: translate3d(0.6px, 0, 0.1px) rotateY(45deg);
  background-color: #882941;
}
.box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  width: 100%;
  max-width: 40rem;
  margin: 0 auto;
}
</style>

Rujukan CSS di codepen.io/Rplus/pen/QNgjzE