3D Dice & Domino
3D Dice & Domino
  • Post author:
  • Post category:Uncategorized
  • Reading time:7 mins read
  • Post published:July 17, 2022
  • Post comments:0 Comments
  • Post last modified:July 17, 2022

Hy Everyone, In this tutorial we will create a 3D Dice & Domino. We have added animation to our 3D Dice. The animation will rotate the dice.

For creating this Dice we will need three files called: index.html, style.css & script.js.

3D DICE & DOMINO

Let’s start with our index.html.

index.html

<div class="container" id="app">

	<component :is="showComp"></component>

</div>

<template id="cube-tmpl">
	<div class="cube-container">
		<div class="cube" ref="cube">
			<div id="c-front">
				<svg viewBox="0 0 100 100">
					<circle cx="50" cy="50" r="8" />
				</svg>
			</div>
			<div id="c-left">
				<svg viewBox="0 0 100 100">
					<circle cx="25" cy="25" r="8" />
					<circle cx="50" cy="50" r="8" />
					<circle cx="75" cy="75" r="8" />
				</svg>
			</div>
			<div id="c-back">
				<svg viewBox="0 0 100 100">
					<circle cx="25" cy="25" r="8" />
					<circle cx="75" cy="75" r="8" />
				</svg>
			</div>
			<div id="c-right">
				<svg viewBox="0 0 100 100">
					<circle cx="25" cy="25" r="8" />
					<circle cx="25" cy="75" r="8" />
					<circle cx="75" cy="25" r="8" />
					<circle cx="75" cy="75" r="8" />
				</svg>
			</div>

			<div id="c-top">
				<svg viewBox="0 0 100 100">
					<circle cx="25" cy="25" r="8" />
					<circle cx="25" cy="75" r="8" />
					<circle cx="75" cy="25" r="8" />
					<circle cx="75" cy="75" r="8" />
					<circle cx="25" cy="50" r="8" />
					<circle cx="75" cy="50" r="8" />
				</svg>
			</div>
			<div id="c-bottom">
				<svg viewBox="0 0 100 100">
					<circle cx="25" cy="25" r="8" />
					<circle cx="25" cy="75" r="8" />
					<circle cx="75" cy="25" r="8" />
					<circle cx="75" cy="75" r="8" />
					<circle cx="50" cy="50" r="8" />
				</svg>
			</div>
		</div>
	</div>
</template>

<template id="domino-tmpl">
	<div class="domino-container">
		<div class="domino">
			<div id="d-front">
				<svg viewBox="0 0 100 100">
					<circle cx="50" cy="50" r="8" />
				</svg>
				<div class="line"></div>
				<svg viewBox="0 0 100 100">
					<circle cx="25" cy="25" r="8" />
					<circle cx="75" cy="75" r="8" />
				</svg>
			</div>
			<div id="d-back">
				<svg viewBox="0 0 100 100">
					<circle cx="25" cy="25" r="8" />
					<circle cx="25" cy="75" r="8" />
					<circle cx="75" cy="25" r="8" />
					<circle cx="75" cy="75" r="8" />
					<circle cx="25" cy="50" r="8" />
					<circle cx="75" cy="50" r="8" />
				</svg>
				<div class="line"></div>
				<svg viewBox="0 0 100 100">
					<circle cx="25" cy="25" r="8" />
					<circle cx="50" cy="50" r="8" />
					<circle cx="75" cy="75" r="8" />
				</svg>
			</div>
			<div id="d-top"></div>
			<div id="d-bottom"></div>
			<div id="d-left"></div>
			<div id="d-right"></div>

		</div>
	</div>
</template>

style.css

@import url("https://fonts.googleapis.com/css2?family=Dosis:[email protected];800&display=swap");

*,
::after,
::before {
	margin: 0;
	padding: 0;
	box-sizing: border-box;

	--black: #0e1313;
	--dark-black: #090909;
	--red: #c81116;
}

body {
	height: 100vh;
	display: grid;
	place-content: center;
	font-family: "Dosis", sans-serif;
	font-weight: 300;
	color: #bebebe;

	background-color: var(--black);
}

.container {
	width: 400px;
	height: 60vh;
	display: grid;
	justify-items: center;
	position: relative;
}

section {
	position: absolute;
	left: 50%;
	bottom: 5%;
	transform: translateX(-50%);
	width: min-content;
	display: grid;
	grid-template-columns: repeat(3, min-content);
	gap: 0.5em;
	align-items: center;
}
section h2 {
	font-size: 2rem;
	letter-spacing: 2px;
	font-weight: 800;
	text-align: center;
	cursor: pointer;
	user-select: none;
	transition: color 0.3s;
}
section h2:nth-child(2) {
	font-size: 3rem;
	opacity: 1;
	cursor: default;
}

.active {
	color: var(--red);
	pointer-events: none;
}

/* DICE PIECE
--------------------------------------- */
.cube-container {
	width: 100px;
	height: 100px;
	perspective: 1000px;
}

.cube {
	transform-style: preserve-3d;
	width: 100%;
	height: 100%;
	position: relative;
	margin-top: 6em;
}
.cube div {
	position: absolute;
	width: 100%;
	height: 100%;
	display: grid;
	place-content: center;
	border-radius: 8px;
	backface-visibility: hidden;
}
.cube div:nth-child(odd) {
	background-color: var(--red);
}
.cube div:nth-child(even) {
	background-color: var(--black);
}
.cube div svg {
	width: 100px;
	height: 100px;
}
.cube div svg circle {
	fill: var(--black);
	stroke: none;
}
.cube div:nth-child(even) svg circle {
	fill: var(--red);
	stroke: none;
}

#c-top {
	transform: rotateX(90deg) translateZ(50px);
}
#c-bottom {
	transform: rotateX(-90deg) translateZ(50px);
}

#c-right {
	transform: rotateY(90deg) translateZ(50px);
}
#c-left {
	transform: rotateY(-90deg) translateZ(50px);
}

#c-front {
	transform: rotateX(0deg) translateZ(50px);
}
#c-back {
	transform: rotateX(-180deg) translateZ(50px);
}

/* DOMINO PIECE
--------------------------------------- */
.domino-container {
	width: 100px;
	height: 200px;
	perspective: 1000px;
	margin-top: 3em;
}

.domino {
	transform-style: preserve-3d;
	width: 100%;
	height: 100%;
	position: relative;
	transform-origin: 50% 50%;
}
.domino div {
	position: absolute;
	display: grid;
	place-items: center;
	border-radius: 5px;
	overflow: hidden;
}
.domino div .line {
	width: 90%;
	height: 3px;
	background-color: var(--black);
}

#d-front,
#d-back {
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
}
#d-front {
	transform: rotateX(0deg) translateZ(10px);
	background-color: var(--red);
}
#d-back {
	transform: rotateX(-180deg) translateZ(10px);
	background-color: var(--black);
}
#d-back .line {
	background-color: var(--red);
}
#d-back svg circle {
	fill: var(--red);
	stroke: none;
}

#d-left,
#d-right {
	width: 20px;
	height: 100%;
	background-color: var(--dark-black);
}
#d-right {
	transform: rotateY(90deg) translateZ(90px);
}
#d-left {
	transform: rotateY(-90deg) translateZ(10px);
}

#d-top,
#d-bottom {
	width: 100%;
	height: 20px;
	background-color: var(--dark-black);
}
#d-bottom {
	transform: rotateX(90deg) translateZ(10px) translateY(0px);
}
#d-top {
	transform: rotateX(90deg) translateZ(-190px) translateY(0px);
}

script.js

const app = Vue.createApp({
	data() {
		return {
			showComp: "cube"
		};
	}
});
app.component("cube", {
	template: "#cube-tmpl",

	mounted() {
		gsap.set(".cube", { rotateY: -45 });

		const cubeTL = gsap.timeline({
			repeat: -1,
			defaults: {
				duration: 1,
				ease: "back.inOut"
			}
		});

		cubeTL
			.to(".cube", { rotateY: -135 })
			.to(".cube", { rotateY: -225 })
			.to(".cube", { rotateY: -315 })
			.to(".cube", { rotateY: -315, rotateX: -90 })
			.to(".cube", { rotateY: -315, rotateX: 90 })
			.to(".cube", { rotateY: -45, rotateX: 0 });
	}
});
app.component("domino", {
	template: "#domino-tmpl",

	mounted() {
		gsap.set(".domino", { rotateY: -45 });
		const dominoTL = gsap.timeline({
			repeat: -1,
			yoyo: true,
			defaults: {
				duration: 1.5,
				ease: "back.inOut"
			}
		});

		dominoTL
			.to(".domino", { rotateY: -315 })
			.to(".domino", { rotateY: -315, rotateX: -180 })
			.to(".domino", { rotateY: -45, rotateX: 0 });
	}
});
app.mount("#app");

Click Here to visit Codepen!

Hope this Article was Interesting!

You Might Like This:

Our Courses:

HTML – Beginner to Advance

CSS – Beginner to Advance

Click to rate this post!
[Total: 0 Average: 0]

Oh, hi there 👋 It’s nice to meet you.

Sign up to receive awesome content in your inbox, every week.

We don’t spam! Read our privacy policy for more info.

Leave a Reply