vue+css实现三维两人打牌场景效果代码
代码语言：html
所属分类：三维
代码描述：vue+css实现三维两人打牌场景效果代码，左键单击并拖动以旋转，单击鼠标中键并拖动以移动模型，滚轮缩放。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body {
height: 100vh;
margin: 0;
background-color: #555;
overflow: hidden;
font-family: monospace, sans-serif;
}
body * {
box-sizing: border-box;
}
body #app {
height: 100vh;
display: grid;
}
body #view {
overflow: hidden;
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
perspective: 500px;
border: 0;
outline: 0;
}
body #view * {
transform-style: preserve-3d;
}
body #view #space {
position: relative;
display: grid;
grid-template-areas: "overlap";
transform-style: preserve-3d;
justify-content: center;
align-items: flex-end;
transform: rotateX(-20deg) rotateY(20deg);
font-size: calc(5vh + 1vw);
transform-origin: center 90%;
-pointer-events: none;
}
body #view #space > * {
grid-area: overlap;
}
body #view #space .reference {
transform-style: preserve-3d;
display: grid;
grid-template-areas: "overlap";
}
body #view #space .reference > * {
grid-area: overlap;
transform-origin: top left;
align-items: end;
}
body #view #space .absolute {
position: absolute;
}
body #view #space .cuboid,
body #view #space .plane {
width: var(--sizeX);
height: var(--sizeY);
transform: translateX(var(--posX)) translateY(calc(var(--posY) * -1)) translateZ(var(--posZ)) rotateX(var(--rotX)) rotateY(var(--rotY)) rotateZ(var(--rotZ));
align-items: start;
}
body #view #space .cuboid.test > *, body #view #space .cuboid.plane.test,
body #view #space .plane.test > *,
body #view #space .plane.plane.test {
border: solid 1px black;
background: linear-gradient(#f005, #00f5);
box-shadow: 0 0 0 1px #0005;
}
body #view #space .cuboid.test > *.top, body #view #space .cuboid.plane.test.top,
body #view #space .plane.test > *.top,
body #view #space .plane.plane.test.top {
background: radial-gradient(#fff 5%, #f0f5 20%);
}
body #view #space .cuboid.test > *.bottom, body #view #space .cuboid.plane.test.bottom,
body #view #space .plane.test > *.bottom,
body #view #space .plane.plane.test.bottom {
background: radial-gradient(#000 5%, #0f05 20%);
}
body #view #space .cuboid._top > .top, body #view #space .cuboid._bottom > .bottom, body #view #space .cuboid._right > .right, body #view #space .cuboid._left > .left, body #view #space .cuboid._front > .front, body #view #space .cuboid._back > .back,
body #view #space .plane._top > .top,
body #view #space .plane._bottom > .bottom,
body #view #space .plane._right > .right,
body #view #space .plane._left > .left,
body #view #space .plane._front > .front,
body #view #space .plane._back > .back {
display: none;
}
body #view #space .cuboid .top,
body #view #space .plane .top {
height: var(--sizeZ);
width: var(--sizeX);
transform: rotateX(90deg);
}
body #view #space .cuboid .bottom,
body #view #space .plane .bottom {
height: var(--sizeZ);
width: var(--sizeX);
transform: translateY(var(--sizeY)) rotateX(90deg);
}
body #view #space .cuboid .left,
body #view #space .plane .left {
height: var(--sizeY);
width: var(--sizeZ);
transform: rotateY(-90deg);
}
body #view #space .cuboid .right,
body #view #space .plane .right {
height: var(--sizeY);
width: var(--sizeZ);
transform: translateX(var(--sizeX)) rotateY(-90deg);
}
body #view #space .cuboid .front,
body #view #space .plane .front {
width: var(--sizeX);
height: var(--sizeY);
transform: translateZ(var(--sizeZ));
}
body #view #space .cuboid .back,
body #view #space .plane .back {
width: var(--sizeX);
height: var(--sizeY);
}
body #view #space .cuboid.shaded > .front, body #view #space .cuboid.shaded > .back,
body #view #space .plane.shaded > .front,
body #view #space .plane.shaded > .back {
filter: brightness(0.9);
}
body #view #space .cuboid.shaded > .left, body #view #space .cuboid.shaded > .right,
body #view #space .plane.shaded > .left,
body #view #space .plane.shaded > .right {
filter: brightness(0.8);
}
body #view #space .group {
transform: translateX(calc(var(--posX))) translateY(calc(var(--posY) * -1)) translateZ(var(--posZ)) rotateX(var(--rotX)) rotateY(var(--rotY)) rotateZ(var(--rotZ));
}
body #view #space .group > .reference {
align-items: end;
}
body #view #space .group.shaded > .reference .cuboid > .front, body #view #space .group.shaded > .reference .cuboid > .back {
filter: brightness(0.9);
}
body #view #space .group.shaded > .reference .cuboid > .left, body #view #space .group.shaded > .reference .cuboid > .right {
filter: brightness(0.8);
}
body #view #space .group.shaded > .reference .cuboid > .bottom {
filter: brightness(0.7);
}
#floor > * {
background: top left/100% 0.5em linear-gradient(#0002 50%, #0001 50%), top left/0.5em 100% linear-gradient(90deg, #0002 50%, #0001 50%), #624b39;
}
.outlined .cuboid > * {
border: solid 1px black;
box-shadow: 0 0 0 1px #0005;
}
.player,
#table {
--hairColor: #bbb;
--skinColor: #e0b2ab;
--vestTexture: top left / 0.03em 100%
linear-gradient(90deg, #0000001a, #00000047),
#333;
}
.player .head,
#table .head {
-webkit-animation: bobbleHead 5s linear infinite;
animation: bobbleHead 5s linear infinite;
}
.player .cuboid.skin > *,
.player .plane.skin > *,
#table .cuboid.skin > *,
#table .plane.skin > * {
background-color: var(--skinColor);
}
.player .cuboid.hat > *, .player .cuboid.skull > .bottom,
.player .plane.hat > *,
.player .plane.skull > .bottom,
#table .cuboid.hat > *,
#table .cuboid.skull > .bottom,
#table .plane.hat > *,
#table .plane.skull > .bottom {
background-color: #222;
}
.player .cuboid.wood > *,
.player .plane.wood > *,
#table .cuboid.wood > *,
#table .plane.wood > * {
background: top left/0.1em auto linear-gradient(90deg, #0002 50%, #0001 50%) #7b5d4b;
}
.player .cuboid.pants > *,
.player .plane.pants > *,
#table .cuboid.pants > *,
#table .plane.pants > * {
background: top left/0.01em 100% linear-gradient(90deg, #5f5ffb88, #4242bb88), #4242bb;
}
.player .cuboid.vest > *,
.player .plane.vest > *,
#table .cuboid.vest > *,
#table .plane.vest > * {
background: var(--vestTexture);
}
.player .cuboid.vest.forearm > :not(.bottom)::before,
.player .plane.vest.forearm > :not(.bottom)::before,
#table .cuboid.vest.forearm > :not(.bottom)::before,
#table .plane.vest.forearm > :not(.bottom)::before {
content: "";
display: block;
width: 100%;
height: 0.1em;
background-color: #fff;
}
.player .cuboid.vest.forearm > :not(.bottom).right::before,
.player .plane.vest.forearm > :not(.bottom).right::before,
#table .cuboid.vest.forearm > :not(.bottom).right::before,
#table .plane.vest.forearm > :not(.bottom).right::before {
background: 0.015em top/auto auto radial-gradient(circle, #1115, #111 0.02em, #0000 0.02em) no-repeat, #fff;
}
.player .cuboid.vest.body > .left::before, .player .cuboid.vest.body > .left::after,
.player .plane.vest.body > .left::before,
.player .plane.vest.body > .left::after,
#table .cuboid.vest.body > .left::before,
#table .cuboid.vest.body > .left::after,
#table .plane.vest.body > .left::before,
#table .plane.vest.body > .left::after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.player .cuboid.vest.body > .left::before,
.player .plane.vest.body > .left::before,
#table .cuboid.vest.body > .left::before,
#table .plane.vest.body > .left::before {
background-color: #fff;
-webkit-clip-path: polygon(20% 0, 50% 50%, 80% 0);
clip-path: polygon(20% 0, 50% 50%, 80% 0);
}
.player .cuboid.vest.body > .left::after,
.player .plane.vest.body > .left::after,
#table .cuboid.vest.body > .left::after,
#table .plane.vest.body > .left::after {
background: 50% top/0.05em 0.05em radial-gradient(circle, #ac836f, #513520 0.012em, #0000 0.014em) repeat-y, calc(50% + 0.02em) top/0.1em 100% linear-gradient(90deg, #0000, #0005 10%, #0000 12% 50%, #0005 52%, #0000 65%) no-repeat;
-webkit-clip-path: polygon(20% 0, 50% 50%, 80% 0);
clip-path: polygon(20% 0, 50% 50%, 80% 0);
}
.player .cuboid.glasses,
.player .plane.glasses,
#table .cuboid.glasses,
#table .plane.glasses {
--glassesColor: #c89e3b;
background: center 80%/0.12em 0.02em linear-gradient(var(--glassesColor), var(--glassesColor)) no-repeat;
filter: drop-shadow(0 0 0.01em #0005);
}
.player .cuboid.glasses::before, .player .cuboid.glasses::after,
.player .plane.glasses::before,
.player .plane.glasses::after,
#table .cuboid.glasses::before,
#table .cuboid.glasses::after,
#table .plane.glasses::before,
#table .plane.glasses::after {
content: "";
display: block;
height: 0.12em;
width: 0.12em;
background: radial-gradient(#0000 55%, var(--glassesColor) 60% 65%, #0000 70%);
position: absolute;
}
.player .cuboid.glasses::before,
.player .plane.glasses::before,
#table .cuboid.glasses::before,
#table .plane.glasses::before {
bottom: 0;
left: 60%;
}
.player .cuboid.glasses::after,
.player .plane.glasses::after,
#table .cuboid.glasses::after,
#table .plane.glasses::after {
bottom: 0;
right: 60%;
}
.player .cuboid.brows::before, .player .cuboid.brows::after,
.player .plane.brows::before,
.player .plane.brows::after,
#table .cuboid.brows::before,
#table .cuboid.brows::after,
#table .plane.brows::before,
#table .plane.brows::after {
content: "";
display: block;
width: 0.1em;
height: 0.04em;
background-color: var(--hairColor);
position: absolute;
filter: drop-shadow(0 0 0.01em #0005);
bottom: -10%;
}
.player .cuboid.brows::before,
.player .plane.brows::before,
#table .cuboid.brows::before,
#table .plane.brows::before {
left: 60%;
transform: rotate(-10deg);
}
.player .cuboid.brows::after,
.player .plane.brows::after,
#table .cuboid.brows::after,
#table .plane.brows::after {
right: 60%;
transform: rotate(10deg);
}
.player .cuboid.eyes::before, .player .cuboid.eyes::after,
.player .plane.eyes::before,
.player .plane.eyes::after,
#table .cuboid.eyes::before,
#table .cuboid.eyes::after,
#table .plane.eyes::before,
#table .plane.eyes::after {
content: "";
display: block;
width: 0.04em;
height: 0.04em;
background-color: #111;
position: absolute;
filter: drop-shadow(0 0 0.01em #0005);
bottom: 25%;
border-radius: 50%;
}
.player .cuboid.eyes::before,
.player .plane.eyes::before,
#table .cuboid.eyes::before,
#table .plane.eyes::before {
left: 68%;
}
.player .cuboid.eyes::after,
.player .plane.eyes::after,
#table .cuboid.eyes::after,
#table .plane.eyes::after {
right: 68%;
}
.player .cuboid.mouth,
.player .plane.mouth,
#table .cuboid.mouth,
#table .plane.mouth {
background-color: #111;
-webkit-clip-path: circle(30% at 50% 60%);
clip-path: circle(30% at 50% 60%);
}
.player .cuboid.hair > *,
.player .plane.hair > *,
#table .cuboid.hair > *,
#table .plane.hair > * {
background-color: var(--hairColor);
}
.player .cuboid.shoe > *,
.player .plane.shoe > *,
#table .cuboid.shoe > *,
#table .plane.shoe > * {
background: radial-gradient(#0000, #ffffff08), #130f0c;
}
.player .cuboid.shoe > *.top::before,
.player .plane.shoe > *.top::before,
#table .cuboid.shoe > *.top::before,
#table .plane.shoe > *.top::before {
content: "";
display: block;
position: absolute;
top: 10%;
height: 80%;
right: 12%;
width: 5%;
background-image: linear-gradient(#aaa5, #aaa 20% 80%, #aaa5);
filter: drop-shadow(-0.02em 0 0 #aaa) drop-shadow(-0.02em 0 0 #aaa);
border-radius: 1em;
}
.player .cuboid.hat > *,
.player .plane.hat > *,
#table .cuboid.hat > *,
#table .plane.hat > * {
box-shadow: 0 0 0 0.005em #222;
}
.player .cuboid.skull > *,
.player .plane.skull > *,
#table .cuboid.skull > *,
#table .plane.skull > * {
overflow: hidden;
}
.player .cuboid.skull > .right::before, .player .cuboid.skull > .front::before, .player .cuboid.skull > .back::before,
.player .plane.skull > .right::before,
.player .plane.skull > .front::before,
.player .plane.skull > .back::before,
#table .cuboid.skull > .right::before,
#table .cuboid.skull > .front::before,
#table .cuboid.skull > .back::before,
#table .plane.skull > .right::before,
#table .plane.skull > .front::before,
#table .plane.skull > .back::before {
content: "";
display: block;
width: 100%;
height: 100%;
background-color: var(--hairColor);
position: absolute;
}
.player .cuboid.skull > .right::before,
.player .plane.skull > .right::before,
#table .cuboid.skull > .right::before,
#table .plane.skull > .right::before {
width: 1em;
height: 1em;
width: 1em;
height: 1em;
transform: translateX(-50%) translateY(12%) rotate(45deg);
left: 50%;
box-shadow: 0 0 0.02em #0005;
}
.player .cuboid.skull > .front::before, .player .cuboid.skull > .back::before,
.player .plane.skull > .front::before,
.player .plane.skull > .back::before,
#table .cuboid.skull > .front::before,
#table .cuboid.skull > .back::before,
#table .plane.skull > .front::before,
#table .plane.skull > .back::before {
width: 110%;
transform: rotate(-10deg) translateY(50%) translateX(-5%);
box-shadow: 0 0 0.02em #0005;
}
.player#gunner .cuboid,
.player#gunner .plane,
#table#gunner .cuboid,
#table#gunner .plane {
--hairColor: #553325;
--skinColor: #eaba9b;
--vestTexture: top left/100% 0.05em linear-gradient(#fff1 50%, #0001 50%),
top left/0.05em 100% linear-gradient(90deg, #fff1 50%, #0001 50%), #2f2014;
}
.player#gunner .cuboid.hat > *, .player#gunner .cuboid.skull > .bottom,
.player#gunner .plane.hat > *,
.player#gunner .plane.skull > .bottom,
#table#gunner .cuboid.hat > *,
#table#gunner .cuboid.skull > .bottom,
#table#gunner .plane.hat > *,
#table#gunner .plane.skull > .bottom {
background-color: #222;
}
.player#gunner .cuboid.pants > *,
.player#gunner .plane.pants > *,
#table#gunner .cuboid.pants > *,
#table#gunner .plane.pants > * {
background: top left/0.02em 100% linear-gradient(90deg, #0001, #0003), #666;
}
.player#gunner .cuboid.vest > *,
.player#gunner .plane.vest > *,
#table#gunner .cuboid.vest > *,
#table#gunner .plane.vest > * {
background: var(--vestTexture);
}
.player#gunner .cuboid.body > .left::before,
.player#gunner .plane.body > .left::before,
#table#gunner .cuboid.body > .left::before,
#table#gunner .plane.body > .left::before {
content: "";
}
.player#gunner .cuboid.mouth,
.player#gunner .plane.mouth,
#table#gunner .cuboid.mouth,
#table#gunner .plane.mouth {
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);
clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);
background-color: #000;
border-radius: 50%;
}
.player#gunner .cuboid.brows::before,
.player#gunner .plane.brows::before,
#table#gunner .cuboid.brows::before,
#table#gunner .plane.brows::before {
bottom: 10%;
transform: rotate(20deg);
}
.player#gunner .cuboid.brows::after,
.player#gunner .plane.brows::after,
#table#gunner .cuboid.brows::after,
#table#gunner .plane.brows::after {
bottom: 10%;
transform: rotate(-20deg);
}
.player#gunner .cuboid.scar,
.player#gunner .plane.scar,
#table#gunner .cuboid.scar,
#table#gunner .plane.scar {
background-color: var(--skinColor);
filter: brightness(0.6);
-webkit-clip-path: polygon(41% 9%, 50% 27%, 59% 51%, 62% 88%, 40% 45%, 27% 69%, 24% 37%);
clip-path: polygon(41% 9%, 50% 27%, 59% 51%, 62% 88%, 40% 45%, 27% 69%, 24% 37%);
}
.player#gunner .cuboid.eyes::before, .player#gunner .cuboid.eyes::after,
.player#gunner .plane.eyes::before,
.player#gunner .plane.eyes::after,
#table#gunner .cuboid.eyes::before,
#table#gunner .cuboid.eyes::after,
#table#gunner .plane.eyes::before,
#table#gunner .plane.eyes::after {
bottom: 40%;
}
.player#gunner .cuboid.wood.knife > *,
.player#gunner .plane.wood.knife > *,
#table#gunner .cuboid.wood.knife > *,
#table#gunner .plane.wood.knife > * {
background: #2f2218;
}
.player#gunner .cuboid.blade.knife,
.player#gunner .plane.blade.knife,
#table#gunner .cuboid.blade.knife,
#table#gunner .plane.blade.knife {
background: top right/20% 100% linear-gradient(90deg, #0000, #fff4) no-repeat, #777;
-webkit-clip-path: polygon(0 0, 100% 27%, 100% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 27%, 100% 100%, 0% 100%);
}
#table .cuboid.coin > * {
background: top left/10% 100% linear-gradient(90deg, #fff2, #0001);
background-color: #d7b919;
}
#table .cuboid.coin > *.top, #table .cuboid.coin > *.bottom {
background-image: unset;
}
#table .cuboid.coin > *.top::before, #table .cuboid.coin > *.bottom::before {
content: "";
display: block;
position: absolute;
width: 60%;
height: 60%;
left: 20%;
top: 20%;
box-shadow: inset 0 0 0.01em #0005;
}
#table .cuboid.deck > .top {
background: radial-gradient(#0000 60%, #801a1a), top left/100% 0.01em linear-gradient(#fff2 50%, #fff1 50%), top left/0.01em 100% linear-gradient(90deg, #fff2 50%, #fff1 50%), #801a1a;
}
#table .cuboid.deck > * {
background: top left/100% 0.008em linear-gradient(#0005, #0000), #fff;
}
#table .cuboid.bottle > * {
background-color: #26482682;
}
#table .cuboid.bottle.body {
position: relative;
}
#table .cuboid.bottle.body > .top {
-webkit-clip-path: polygon(0% 0%, 0% 100%, 0.03em 100%, 0.03em 0.03em, calc(100% - 0.03em) 0.03em, calc(100% - 0.03em) calc(100% - 0.03em), 0.03em calc(100% - 0.03em), 0.03em 100%, 100% 100%, 100% 0%);
clip-path: polygon(0% 0%, 0% 100%, 0.03em 100%, 0.03em 0.03em, calc(100% - 0.03em) 0.03em, calc(100% - 0.03em) calc(100% - 0.03em), 0.03em calc(100% - 0.03em), 0.03em 100%, 100% 100%, 100% 0%);
}
#table .cuboid.bottle.body > :not(.top, .bottom)::before {
content: "";
display: block;
position: absolute;
top: 40%;
width: 100%;
height: 20%;
background-color: #c8ae92;
}
#table .cuboid.wine > * {
background-color: #6615aab5;
}
.card .front,
.card .back {
border-radius: 0.01em;
overflow: hidden;
}
.card .back {
background: radial-gradient(#0000 60%, #801a1a), top left/100% 0.01em linear-gradient(#fff2 50%, #fff1 50%), top left/0.01em 100% linear-gradient(90deg, #fff2 50%, #fff1 50%), #801a1a;
}
.card > .front {
background-color: #fff;
}
.card > .front::before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.card.heart .front::before, .card.diamond .front::before {
background-color: #f00;
}
.card.heart > .front::before {
-webkit-clip-path: polygon(50% 30%, 75% 20%, 90% 50%, 50% 80%, 10% 50%, 25% 20%);
clip-path: polygon(50% 30%.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0