vue+css实现骰子与多米诺骨牌三维旋转效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：vue+css实现骰子与多米诺骨牌三维旋转效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Dosis:wght@300;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);
}
</style>

</head>

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

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

	<section>
		<h2 @click="showComp = 'cube'" :class="{ 'active': showComp === 'cube' }">DICE</h2>
		<h2>&amp;</h2>
		<h2 @click="showComp = 'domino'" :class="{ 'active': showComp === 'domino' }">DOMINO</h2>
	</section>

</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.........完整代码请登录后点击上方下载按钮下载查看