Letak gambar atas kiub berputar

Demo

kanan. kosong

Pautan: Kumbang

kiri. kosong

Memuatkan gambar berukuran tidak melebihi s200
HTML view ▼

<div class="kurungan">
  <div class="kiub">
  <div class="atas">
<br/><a href="https://blogger.googleusercontent.com/img/a/AVvXsEjbRagQfA9mlEauW9p6iarM0nEpNQ3t-sFChLdoM5P5xrMoRydinP4Ziw7Y-dWHTM3mgzNN5XIXcOFYbSsc6j5peEFdZjpHjMH5DjssZIMIxPn9LszJsM0W7didYqg1uZJfV_3YEFQ4yzbDRs-cFrpF9HrDwOS0fKHkfEAg07R8L5fw1KlB7vVHXSDh=s1560" ><img src="https://blogger.googleusercontent.com/img/a/AVvXsEjbRagQfA9mlEauW9p6iarM0nEpNQ3t-sFChLdoM5P5xrMoRydinP4Ziw7Y-dWHTM3mgzNN5XIXcOFYbSsc6j5peEFdZjpHjMH5DjssZIMIxPn9LszJsM0W7didYqg1uZJfV_3YEFQ4yzbDRs-cFrpF9HrDwOS0fKHkfEAg07R8L5fw1KlB7vVHXSDh=s200"/></a></div>
  <div class="depan">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDgIz52AJ-yBsDalVD5b-_JMf11OUtj9PEy6n0ZHXHkOreITTgKM5RIy0PaRI_xllqmT6kf5QoTEs6RHBqb9IhDHrqBDgCxfsZRZzkTeTNBvP1LX4Asdo9rRfiTm1IxyiQDgISMQqRxWg/s920/DSC01849e4+mtketapang.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDgIz52AJ-yBsDalVD5b-_JMf11OUtj9PEy6n0ZHXHkOreITTgKM5RIy0PaRI_xllqmT6kf5QoTEs6RHBqb9IhDHrqBDgCxfsZRZzkTeTNBvP1LX4Asdo9rRfiTm1IxyiQDgISMQqRxWg/s200/DSC01849e4+mtketapang.jpg"/></a></div>
<div class="kanan">
kanan. kosong</div>
  <div class="belakang">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbkd1Ppi4q9FCl3kCLVvWkMYDOSw3FMK3xhvp44p_RsalC3J99TvyjGosM49ji3ea1HHbJbuU20KgvxmEQd2EzBgxCiLSzK7gFjyi5IlrOuo2tHg5npDWBK3MdS1GXPC5krcqX3kL_UVs/s900/kumbang+main+golf+58-1.JPG"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbkd1Ppi4q9FCl3kCLVvWkMYDOSw3FMK3xhvp44p_RsalC3J99TvyjGosM49ji3ea1HHbJbuU20KgvxmEQd2EzBgxCiLSzK7gFjyi5IlrOuo2tHg5npDWBK3MdS1GXPC5krcqX3kL_UVs/s200/kumbang+main+golf+58-1.JPG"/></a><br/>Pautan: <a href="https://cerkliktengok.blogspot.com/2021/09/kumbang.html" target="_blank" rel="nofollow">Kumbang</a></div>
  <div class="kiri">
kiri. kosong</div></div>
<style type="text/css">
.kurungan {
perspective-origin: 50% 100px; perspective: 1000px;
}
.kiub {
margin: auto; padding-top: 10px; padding-bottom: 216px; position: relative; transform-style: preserve-3d; width: 200px; text-align: center; animation: putar 20s infinite linear;
}
.kiub div {
box-shadow: inset 0px 0px 50px #cccccc; height: 200px; position: absolute; width: 200px;
}
.belakang {
transform: translateZ(-100px) rotateY(180deg);
}
.kanan {
transform: rotateY(-270deg) translateX(100px); transform-origin: top right;
}
.kiri {
transform: rotateY(270deg) translateX(-100px); transform-origin: center left;
}
.atas {
transform: rotateX(-90deg) translateY(-100px); transform-origin: top center;
}
.bawah {
transform: rotateX(90deg) translateY(100px); transform-origin: bottom center;
}
.depan {
transform: translateZ(100px);}
@keyframes putar {
0% {
  transform: rotateX(0deg);
  }
10% {
  transform: rotateX(90deg);
  }
17% {
  transform: rotateX(90deg);
  }
23% {
  transform: rotateY(0);
  }
100% {
  transform: rotateY(-360deg);
  }
.atas {
transform: translateZ(100px);}
@keyframes putar {
0% {
  transform: rotateX(0deg) translateY(0px); transform-origin: top center;
  }
50% {
  transform: rotateX(0deg) translateY(0px); transform-origin: top center;
  }
100% {
  transform: rotateX(-90deg) translateY(-70px); transform-origin: top center;
  }
}
}</style>

Tutup