Un código de zegarekdawida

2,226 zegarkidawida

Abrir en el editor Publica tu código

Recomendado

17 November 2025

Animación de corazón explosivo interactiva

19 December 2025

Ejemplo de tarjeta de producto HTML 3D de zapatillas Nike

14 January 2026

Ejemplo de diseño adaptable de barra lateral HTML CSS

HTML

<div class="container">
	<div class="cube" id="cube">
		<div class="face front title archean">
      <div class="mouse-scroll">
				<div class="arrow"></div>
				<div class="mouse">
					<div class="wheel"></div>
				</div>
			</div>
			<p>Life on Earth<br><small>-3,700,000,000</small></p>
		</div>
		<div class="face front title cambrian">
			<p>Cambrian<br><small>-540,000,000</small></p>
		</div>
		<div class="face front title ordovician">
			<p>Ordovician<br><small>-485,400,000</small></p>
		</div>
		<div class="face front title silurian">
			<p>Silurian<br><small>-443,800,000</small></p>
		</div>
		<div class="face front title devonian">
			<p>Devonian<br><small>-419,200,000</small></p>
		</div>
		<div class="face front title carboniferous">
			<p>Carboniferous<br><small>-358,900,000</small></p>
		</div>
		<div class="face front title permian">
			<p>Permian<br><small>-298,900,000</small></p>
		</div>
		<div class="face front title triassic">
			<p>Triassic<br><small>-252,000,000</small></p>
		</div>
		<div class="face front title jurassic">
			<p>Jurassic<br><small>-201,300,000</small></p>
		</div>
		<div class="face front title cretaceous">
			<p>Cretaceous<br><small>-145,000,000</small></p>
		</div>
		<div class="face front title paleogene">
			<p>Paleogene<br><small>-66,000,000</small></p>
		</div>
		<div class="face front title neogene">
			<p>Neogene<br><small>-23,000,000</small></p>
		</div>
		<div class="face front title quaternary">
			<p>Quaternary<br><small>-2 588 000</small></p>
		</div>

<div class="face front main">
			
		</div>
		<div class="face back">
			<div class="frame dunkleosteus">
				<div class="border">
					<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0d/Homo.erectus.adult.female.smithsonian.timevanson.flickr.jpg/2000px-Homo.erectus.adult.female.smithsonian.timevanson.flickr.jpg" class="left-align">
					<div>Human</div>
				</div>
			</div>
		</div>
		<div class="face left">
			<p class="pro-01">First living organisms-bacteria</p>
			<p class="pro-02">First animal traces and algae</p>
			<p class="pro-03">First animals with shells, sponges</p>
			<p class="pro-04">Jellyfish</p>
			<p class="cam-01">First chordates</p>
			<p class="cam-02">First fishes</p>
			<p class="ord-01">Sudden diversification of metazoan families</p>
			<p class="sil-01">First vascular land plants</p>
			<p class="dev-01">First amphibians</p>
			<p class="dev-02">Jawed fishes diversify</p>
			<p class="car-01">First reptiles</p>
			<p class="car-02">Scale trees</p>
			<p class="car-03">Seed ferns</p>
			<p class="per-01">Major extinctions</p>
			<p class="per-02">Reptiles diversify</p>
			<p class="tri-01">First dinosaurs</p>
			<p class="tri-02">First mammals</p>
			<p class="jur-01">Dinosaurs diversify</p>
			<p class="jur-02">First birds</p>
			<p class="cre-01">First flowering plants</p>
			<p class="cre-02">First primates</p>
			<p class="cre-03">Extinction of dinosaurs</p>
			<p class="pal-01">Mammals diversify</p>
			<p class="neo-01">Mammals diversify</p>

</div>
		<div class="face right">

<div class="frame cyanobacteria">
				<div class="border">
					<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Anabaena2.jpg/1280px-Anabaena2.jpg" class="left-align">
					<div>Cyanobacteria</div>
				</div>
			</div>
			<div class="frame algae">
				<div class="border">
					<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Marine_algae_in_Gullmarsfjorden_at_S%C3%A4mstad_2.jpg/1280px-Marine_algae_in_Gullmarsfjorden_at_S%C3%A4mstad_2.jpg">
					<div>Algae</div>
				</div>
			</div>
			<div class="frame sponge">
				<div class="border">
					<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/23/Sponges_Benwood_20230714.jpg/1024px-Sponges_Benwood_20230714.jpg">
					<div>Sponge</div>
				</div>
			</div>
			<div class="frame jellyfish">
				<div class="border">
					<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f7/Lion%27s_mane_jellyfish_in_Gullmarn_fjord_at_S%C3%A4mstad_8.jpg/1280px-Lion%27s_mane_jellyfish_in_Gullmarn_fjord_at_S%C3%A4mstad_8.jpg">
					<div>Jellyfish</div>
				</div>
			</div>
			<div class="frame trilobite">
				<div class="border">
					<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Eoredlichia_intermedia_trilobite_illustration_2022.jpg/1024px-Eoredlichia_intermedia_trilobite_illustration_2022.jpg">
					<div>Trilobite</div>
				</div>
			</div>
			<div class="frame anomalocaris">
				<div class="border">
					<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/16/Gfp-anomalocaris-predator.jpg/1280px-Gfp-anomalocaris-predator.jpg">
					<div>Anomalocaris</div>
				</div>
			</div>
			<div class="frame haikouichthys">
				<div class="border">
					<img src="https://upload.wikimedia.org/wikipedia/commons/d/d6/Haikouichthys_NT2.jpg">
					<div>Haikouichthys</div>
				</div>
			</div>
			<div class="frame endoceras">
				<div class="border">
					<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/38/Endoceras_sp.png/1280px-Endoceras_sp.png">
					<div>Endoceras</div>
				</div>
			</div>
			<div class="frame aegirocassis">
				<div class="border">
					<img src="https://upload.wikimedia.org/wikipedia/commons/c/c2/Aegirocassis_NT_small.jpg">
					<div>Aegirocassis</div>
				</div>
			</div>
			<div class="frame cooksonia">
				<div class="border">
					<img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/Cooksonia_pertoni_revised.png">
					<div>Cooksonia</div>
				</div>
			</div>
			<div class="frame tiktaalik">
				<div class="border">
					<img src="https://upload.wikimedia.org/wikipedia/commons/d/d4/Tiktaalik_NT_small.jpg">
					<div>Tiktaalik</div>
				</div>
			</div>
			<div class="frame dunkleosteus">
				<div class="border">
					<img src="https://upload.wikimedia.org/wikipedia/commons/3/31/Dunkleosteus_terrelli_-_MUSE.jpg" class="left-align">
					<div>Dunkleosteus</div>
				</div>
			</div>
			<div class="frame bothriolepis">
				<div class="border">
					<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f5/Bothriolepis_canadensis_based_on_2014_reconstruction.jpg/1280px-Bothriolepis_canadensis_based_on_2014_reconstruction.jpg" class="right-align">
					<div>Bothriolepis</div>
				</div>
			</div>

<div class="frame carbonodraco">
				<div class="border">
					<img src="https://upload.wikimedia.org/wikipedia/commons/8/8e/Carbonodraco_lundi.png" class="right-align">
					<div>Carbonodraco</div>
				</div>
			</div>
			<div class="frame petrolacosaurus">
				<div class="border">
					<img src="https://upload.wikimedia.org/wikipedia/commons/f/fe/Petrolacosaurus_BW.jpg" class="left-align">
					<div>Petrolacosaurus</div>
				</div>
			</div>
			<div class="frame spinoaequalis">
				<div class="border">
					<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/68/Spinoaequalis_schultzei_reconstruction.jpg/1280px-Spinoaequalis_schultzei_reconstruction.jpg" class="left-align">
					<div>Spinoaequalis</div>
				</div>
			</div>
			<div class="frame arthropleura">
				<div class="border">
					<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Arthropleura_Reconstruction.jpg/1280px-Arthropleura_Reconstruction.jpg" class="right-align">
					<div>Arthropleura</div>
				</div>
			</div>
			<div class="frame lepidodendrales">
				<div class="border">
					<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Lepidodendrales_reconstrucci%C3%B3n_02.jpg/1203px-Lepidodendrales_reconstrucci%C3%B3n_02.jpg" class="right-align">
					<div>Lepidodendrales</div>
				</div>
			</div>
			<div class="frame seed-fern">
				<div class="border">
					<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/Seed_fern_frond.jpg/1280px-Seed_fern_frond.jpg" class="right-align">
					<div>Seed Fern</div>
				</div>
			</div>
			<div class="frame dimetrodon">
				<div class="border">
					<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Modell_eines_Dimetrodon.jpg/1280px-Modell_eines_Dimetrodon.jpg" class="left-align">
					<div>Dimetrodon</div>
				</div>
			</div>
			<div class="frame pareiasaurus">
				<div class="border">
					<img src="https://upload.wikimedia.org/wikipedia/commons/5/58/Pareiasaurus_serridens.jpg" class="left-align">
					<div>Pareiasaurus</div>
				</div>
			</div>
			<div class="frame claudiosaurus">
				<div class="border">
					<img src="https://upload.wikimedia.org/wikipedia/commons/d/d7/Claudiosaurus_BW.jpg" class="left-align">
					<div>Claudiosaurus</div>
				</div>
			</div>

<div class="frame staurikosaurus">
				<div class="border">
					<img src="https://upload.wikimedia.org/wikipedia/commons/a/a5/Staurikosaurus_BW.jpg" class="left-align">
					<div>Staurikosaurus</div>
				</div>
			</div>
			<div class="frame plateosaurus">
				<div class="border">
					<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Modell_eines_Plateosaurus.jpg/1280px-Modell_eines_Plateosaurus.jpg" class="left-align">
					<div>Plateosaurus</div>
				</div>
			</div>
			<div class="frame lystrosaurus">
				<div class="border">
					<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/202012_Lystrosaurus.png/1280px-202012_Lystrosaurus.png" class="left-align">
					<div>Lystrosaurus</div>
				</div>
			</div>
			<div class="frame tanystropheus">
				<div class="border">
					<img src="https://upload.wikimedia.org/wikipedia/commons/4/4a/Tanystropheus_NT_small.jpg" class="left-align">
					<div>Tanystropheus</div>
				</div>
			</div>
			<div class="frame morganucodon">
				<div class="border">
					<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d4/Morganucodon.jpg/1024px-Morganucodon.jpg" class="left-align">
					<div>Morganucodon</div>
				</div>
			</div>
			<div class="frame gobiconodon">
				<div class="border">
					<img src="https://upload.wikimedia.org/wikipedia/commons/2/2d/Gobiconodon.jpg" class="left-align">
					<div>Gobiconodon</div>
				</div>
			</div>

<div class="frame ankylosaurus">
				<div class="border">
					<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/DinoPark_Plze%C5%88-Ankylosaurus.jpg/1280px-DinoPark_Plze%C5%88-Ankylosaurus.jpg" class="right-align">
					<div>Ankylosaurus</div>
				</div>
			</div>
			<div class="frame pachyrhinosaurus">
				<div class="border">
					<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/37/Pachyrhinosaurus_Perotorum_Alaska_copyright_web.jpg/1105px-Pachyrhinosaurus_Perotorum_Alaska_copyright_web.jpg" class="left-align">
					<div>Pachyrhinosaurus</div>
				</div>
			</div>
			<div class="frame suzhousaurus">
				<div class="border">
					<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/Suzhousaurus.JPG/1280px-Suzhousaurus.JPG" class="left-align">
					<div>Suzhousaurus</div>
				</div>
			</div>
			<div class="frame gigantoraptor">
				<div class="border">
					<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9f/Gigantoraptor_Lebendrekonstruktion_M%C3%BCnchehagen.jpeg/1280px-Gigantoraptor_Lebendrekonstruktion_M%C3%BCnchehagen.jpeg" class="left-align">
					<div>Gigantoraptor</div>
				</div>
			</div>
			<div class="frame archaeopteryx">
				<div class="border">
					<img src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Archaeopteryx_NT.jpg" class="left-align">
					<div>Archaeopteryx</div>
				</div>
			</div>

<div class="frame sagaria">
				<div class="border">
					<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Sagaria_cilentana.jpg/1024px-Sagaria_cilentana.jpg">
					<div>Sagaria</div>
				</div>
			</div>
			<div class="frame purgatorius">
				<div class="border">
					<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/10/Purgatorius_PNAS.jpg/1024px-Purgatorius_PNAS.jpg" class="left-align">
					<div>Purgatorius</div>
				</div>
			</div>
			<div class="frame ningchengopterus">
				<div class="border">
					<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Ningchengopterus_liuae.jpg/621px-Ningchengopterus_liuae.jpg">
					<div>Ningchengopterus</div>
				</div>
			</div>
			<div class="frame argentinosaurus">
				<div class="border">
					<img src="https://upload.wikimedia.org/wikipedia/commons/e/e1/Argentinosaurus_BW.jpg" class="left-align">
					<div>Argentinosaurus</div>
				</div>
			</div>

<div class="frame moeritherium">
				<div class="border">
					<img src="https://upload.wikimedia.org/wikipedia/commons/9/97/Moeritherium.jpg" class="right-align">
					<div>Moeritherium</div>
				</div>
			</div>
			<div class="frame paraceratherium">
				<div class="border">
					<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Paraceratherium_transouralicum.jpg/1280px-Paraceratherium_transouralicum.jpg" class="right-align">
					<div>Paraceratherium</div>
				</div>
			</div>

<div class="frame megatherium">
				<div class="border">
					<img src="https://upload.wikimedia.org/wikipedia/commons/9/98/Megatherium_americanum_Marcus_Burkhardt.jpg" class="left-align">
					<div>Megatherium</div>
				</div>
			</div>
			<div class="frame deinotherium">
				<div class="border">
					<img src="https://upload.wikimedia.org/wikipedia/commons/0/06/Deinotherium_bozasi_JG.png" class="right-align">
					<div>Deinotherium</div>
				</div>
			</div>
			<div class="frame daeodon">
				<div class="border">
					<img src="https://upload.wikimedia.org/wikipedia/commons/1/1f/Daeodon_shoshonensis_2.png" class="left-align">
					<div>Daeodon</div>
				</div>
			</div>

</div>

CSS

@import url(https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap);

body,
.container {
	transform: translate3d(0, 0, 0); 
	will-change: transform;
  display: flex;
	flex-direction: column;
	justify-content: center;
}

body {
	margin: 0;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: black;
	overflow: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

--width: 700px;
	--height: 500px;
	--variable-length: 50500px;
	--length: 51000px;
	--half-length: calc(var(--length) / 2);
}

/* Controls */
.controls {
	margin-bottom: 20px;
	color: white;
	font-family: "Bebas Neue", sans-serif;
	font-size: 1.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: absolute;
	z-index: 999;
	top: 50px;
}

.range-slider {
	width: 300px;
}

.container {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	transform: scale(1);
	transform-origin: center;
}

.cube {
	perspective: 800px;
	perspective-origin: 50% 50%;
	position: relative;
	width: var(--width);
	height: var(--height);
	transform-style: preserve-3d;
	transition: transform 0.3s ease-out;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	will-change: transform;
  transform: translateZ(50000px)
}

.face {
	position: absolute;
	width: var(--width);
	height: var(--height);
	background: rgba(255, 255, 255, 1);
	border: none;
	display: flex;
	align-items: center;
	font-family: "Bebas Neue", sans-serif;
	color: black;
	will-change: transform;
}

.front {
	transform: translateZ(calc(var(--length) - var(--variable-length)));
	background-size: 500px;
	background-blend-mode: difference;
}

.front.main {
	transform: translateZ(calc(var(--length) - var(--variable-length)));
	background-size: 500px;
	background-color: transparent;
	opacity: 1; /* Initial state */
	transition: opacity 5s ease-in-out; 
	display: flex;
	align-items: center;
	justify-content: center;
}

.front.main.hidden {
	opacity: 0.6; 
}

.back {
	transform: translateZ(calc(-1 * var(--variable-length))) rotateY(180deg)
		scale(-1, 1);
	background: rgb(17, 17, 17);
	background: linear-gradient(
		0deg,
		rgba(17, 17, 17, 1) 0%,
		rgba(28, 28, 28, 1) 33%,
		rgba(99, 99, 99, 1) 94%,
		rgba(255, 255, 255, 1) 100%
	);
	display: flex;
	justify-content: center;
	align-items: center;
}
.back .frame {
	position: unset;
}

.left {
	transform: translateZ(calc(var(--half-length) - var(--variable-length)))
		translateX(calc(-1 * var(--half-length))) rotateY(-90deg) scale(-1, 1);
	background: rgba(255, 255, 255, 1);
	width: var(--length);
	background: rgb(17, 17, 17);
	background: linear-gradient(
		0deg,
		rgba(17, 17, 17, 1) 0%,
		rgba(28, 28, 28, 1) 33%,
		rgba(99, 99, 99, 1) 94%,
		rgba(255, 255, 255, 1) 100%
	);
}

.right {
	transform: translateZ(calc(var(--half-length) - var(--variable-length)))
		translateX(calc(-1 * (var(--half-length) - var(--width)))) rotateY(90deg)
		scale(-1, 1);
	background: rgba(255, 255, 0, 1);
	width: var(--length);
	background: rgb(17, 17, 17);
	background: linear-gradient(
		0deg,
		rgba(17, 17, 17, 1) 0%,
		rgba(28, 28, 28, 1) 33%,
		rgba(99, 99, 99, 1) 94%,
		rgba(255, 255, 255, 1) 100%
	);
}

.top {
	transform: translateZ(calc(var(--half-length) - var(--variable-length)))
		translateY(calc(-1 * var(--half-length))) rotateX(90deg) scale(1, -1);
	background: #1c1c1c;
	height: var(--length);
}

.bottom {
	transform: translateZ(calc(var(--half-length) - var(--variable-length)))
		translateY(calc(-1 * (var(--half-length) - var(--height)))) rotateX(-90deg)
		scale(1, -1);
	height: var(--length);
	image-rendering: auto;
	will-change: transform;
  background: url("https://upload.wikimedia.org/wikipedia/commons/3/31/Wood_pattern_parquet_floor_tiles.jpg");
  background-size: 600px
}

p {
	font-size: 7em;
	transform: translateZ(0);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	position: absolute;
}

.left p {
	line-height: 1;
	color: white;
}

.title {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 2em;
	color: white;
	background: none;
	margin-top: 10%;
}

.title p {
	font-size: 3em;
	text-align: center;
	line-height: 0.7;
}

.face img {
	image-rendering: auto; 
	transform: translateZ(0); 
	will-change: transform; 
	backface-visibility: visible; 
	-webkit-backface-visibility: visible; 
}

img.left-align {
	object-position: left;
}
img.right-align {
	object-position: right;
}
img.top-align {
	object-position: top;
}
img.bottom-align {
	object-position: bottom;
}

.cube,
.face,
.frame,
p {
	transform-style: preserve-3d; 
	will-change: transform; 
}

.archean {
	transform: translateZ(calc((var(--length) * 0.987) - var(--variable-length)));
}
.cambrian {
	transform: translateZ(
		calc((var(--length) * 0.83076) - var(--variable-length))
	);
}
.ordovician {
	transform: translateZ(
		calc((var(--length) * 0.74677) - var(--variable-length))
	);
}
.silurian {
	transform: translateZ(
		calc((var(--length) * 0.68277) - var(--variable-length))
	);
}
.devonian {
	transform: translateZ(
		calc((var(--length) * 0.64492) - var(--variable-length))
	);
}
.carboniferous {
	transform: translateZ(
		calc((var(--length) * 0.55215) - var(--variable-length))
	);
}
.permian {
	transform: translateZ(
		calc((var(--length) * 0.45985) - var(--variable-length))
	);
}
.triassic {
	transform: translateZ(
		calc((var(--length) * 0.38679) - var(--variable-length))
	);
}
.jurassic {
	transform: translateZ(
		calc((var(--length) * 0.30969) - var(--variable-length))
	);
}
.cretaceous {
	transform: translateZ(
		calc((var(--length) * 0.22308) - var(--variable-length))
	);
}
.paleogene {
	transform: translateZ(
		calc((var(--length) * 0.10154) - var(--variable-length))
	);
}
.neogene {
	transform: translateZ(
		calc((var(--length) * 0.035384) - var(--variable-length))
	);
}
.quaternary {
	transform: translateZ(
		calc((var(--length) * 0.003981) - var(--variable-length))
	);
}

.frame {
	position: absolute;
	padding: 0;
	margin: 0;
	border: solid 10px #191919;
	width: 300px;
	height: 300px;
	margin: 40px auto;
	box-shadow: 0px 10px 10px #000;
}
.border {
	width: 250px;
	height: 250px;
	position: relative;
	padding: 0;
	margin: 0;
	border: solid 25px #f5f5f5;
}
img {
	display: block;
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	border-top: solid 2px #aaa;
	border-left: solid 2px #aaa;
	border-bottom: solid 2px #ccc;
	border-right: solid 2px #ccc;
	object-fit: cover;
	background: #ccc;
}

p.pro-01 {
	left: 2%;
}
p.pro-02 {
	left: 5%;
}
p.pro-03 {
	left: 9%;
}
p.pro-04 {
	left: 13%;
}

p.cam-01 {
	left: 18%;
}
p.cam-02 {
	left: 21.8%;
}

p.ord-01 {
	left: 27%;
}

p.sil-01 {
	left: 32.5%;
}

p.dev-01 {
	left: 37%;
}
p.dev-02 {
	left: 40%;
}

p.car-01 {
	left: 46%;
}
p.car-02 {
	left: 49%;
}
p.car-03 {
	left: 52%;
}

p.per-01 {
	left: 55%;
}
p.per-02 {
	left: 57%;
}

p.tri-01 {
	left: 63%;
}
p.tri-02 {
	left: 65%;
}

p.jur-01 {
	left: 70%;
}
p.jur-02 {
	left: 74.5%;
}

p.cre-01 {
	left: 79%;
}
p.cre-02 {
	left: 81.5%;
}
p.cre-03 {
	left: 87%;
}

p.pal-01 {
	left: 91%;
}
p.neo-01 {
	left: 97%;
}

.cyanobacteria {
	right: 2.5%;
}
.algae {
	right: 5.5%;
}
.sponge {
	right: 9.5%;
}
.jellyfish {
	right: 13.2%;
}
.trilobite {
	right: 18.3%;
}
.anomalocaris {
	right: 20%;
}
.haikouichthys {
	right: 22%;
}
.endoceras {
	right: 27.3%;
}
.aegirocassis {
	right: 29%;
}
.cooksonia {
	right: 33%;
}
.tiktaalik {
	right: 38%;
}
.dunkleosteus {
	right: 40%;
}
.bothriolepis {
	right: 42%;
}

.carbonodraco {
	right: 46%;
}
.petrolacosaurus {
	right: 47%;
}
.spinoaequalis {
	right: 48%;
}
.arthropleura {
	right: 49%;
}
.lepidodendrales {
	right: 50%;
}
.seed-fern {
	right: 52.3%;
}

.dimetrodon {
	right: 55%;
}
.pareiasaurus {
	right: 57%;
}
.claudiosaurus {
	right: 59%;
}

.staurikosaurus {
	right: 62%;
}
.plateosaurus {
	right: 63%;
}
.lystrosaurus {
	right: 64%;
}
.tanystropheus {
	right: 65%;
}
.morganucodon {
	right: 66%;
}
.gobiconodon {
	right: 67%;
}

.ankylosaurus {
	right: 71%;
}
.pachyrhinosaurus {
	right: 72%;
}
.suzhousaurus {
	right: 73%;
}
.gigantoraptor {
	right: 74%;
}
.archaeopteryx {
	right: 75%;
}

.sagaria {
	right: 80%;
}
.purgatorius {
	right: 82%;
}
.ningchengopterus {
	right: 84%;
}
.argentinosaurus {
	right: 86%;
}

.moeritherium {
	right: 91%;
}
.paraceratherium {
	right: 93%;
}

.megatherium {
	right: 97%;
}
.deinotherium {
	right: 98%;
}
.daeodon {
	right: 99%;
}

.border div {
	position: absolute;
	width: 100%;
	text-align: center;
	font-size: 1.7em;
	line-height: 1.2;
	margin-top: 50px;
	color: white;
}

#zRange {
	display: none;
}

#zValue {
	font-size: 3em;
}

.hidden {
	opacity: 0;
	pointer-events: none;
	transition: opacity 1s ease; 
}

.visible {
	opacity: 1;
	pointer-events: auto;
	transition: opacity 1s ease; 
}

small {
	font-size: 0.6em;
	margin-top: -100px;
}

.mouse-scroll {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
  margin-top:-300px
}

.mouse {
	width: 48px;
	height: 80px;
	border: 4px solid #fff;
	border-radius: 24px;
	display: flex;
	justify-content: center;
	align-items: start;
}

.arrow {
	width: 10px;
	height: 10px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(225deg);
}

.wheel {
	width: 8px;
	height: 16px;
	background-color: #fff;
	border-radius: 4px;
	animation: scroll 1s infinite;
	margin-top: 8px;
}

/* Scroll animation */
@keyframes scroll {
	0% {
		transform: translateY(0);
	}

50% {
		transform: translateY(8px);
	}

100% {
		transform: translateY(0);
	}
}

const rangeSlider = document.getElementById("zRange");
const zValueText = document.getElementById("zValue");
const body = document.querySelector("body");
let zTranslation = Number(rangeSlider.value);

function updateCubeZ() {
	const numericValue = zTranslation * 12745 + 10000000;
	const formattedValue = new Intl.NumberFormat("en-US").format(numericValue);
	zValueText.textContent = `-${formattedValue} Years`;

if (numericValue < 20000000 || numericValue > 550000000) {
		zValueText.classList.remove("visible");
		zValueText.classList.add("hidden");
	} else {
		zValueText.classList.remove("hidden");
		zValueText.classList.add("visible");
	}
	body.style.setProperty("--variable-length", `${zTranslation}px`);
}

window.addEventListener("wheel", (e) => {
	zTranslation += e.deltaY * 5;
	zTranslation = Math.max(0, Math.min(50500, zTranslation));
	updateCubeZ();
	isRotating = false;
});

updateCubeZ();

let isRotating = true;
let rotationYValue = 0;

rotateCube();

document.addEventListener("DOMContentLoaded", () => {
	const frontMain = document.querySelector(".front.main");

setTimeout(() => {
		frontMain.classList.add("hidden");
	}, 100);
});

const bottom = document.querySelector(".bottom");
const length = 55000;
const tileSize = 800;
const numTiles = Math.ceil(length / tileSize);

for (let i = 0; i < numTiles; i++) {
	const tile = document.createElement("div");
	tile.className = "tile";
	tile.style.top = `${i * tileSize}px`;
	bottom.appendChild(tile);
}