css布局实现一个三维国际象棋效果代码-html代码-BFW代码库

代码语言：html
所属分类：三维
代码描述：css布局实现一个三维国际象棋效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
/* 
 Best viewed in Full mode. (Tested on Chrome and Firefox)
 CSS 3D Chess Board with Pieces and 3D Camera Simulation.
 All 3D objects created and processed using CSS and powered by a few lines of JavaScript.
*/

html, body{
padding:0;
margin:0;
background-color:white;
background-image:radial-gradient(#FFF, #ccc);
font-family:"Arial", sans-serif;
font-size:10px;
width:100vw;
height:100vh;
display:block;
scrollbar-color:#F86F0C rgb(200,200,200);
scrollbar-width:thin;
}

/* maximum space to scale the scene uniformly */
.uniform{
position:absolute;left:0;top:0;
width:100vw;height:100vh;
transform:scale(var(--s,1));
display:flex;
align-items:center;
overflow:visible;
transition:transform ease 1s;
}

/* represent the object in 3D space */
.noborders .object3d{
top:80px;
}

.object3d{
top:0px;
position:relative;
transform:perspective(var(--p, 1000px)) rotateX(var(--x, 0deg)) rotateY(var(--y, 0deg)) rotateZ(var(--z, 0deg)) translate3d(var(--tx, 0px), var(--ty, 0px), var(--tz, -12px));
--path-max-rotate:calc(360deg + var(--z, 0deg));
transform-style:preserve-3d;
margin:auto;
transition:all ease 1s;
transition-property:top, transform;
}

.noanimations .piece,
.noanimations .object3d,
.noanimations .uniform,
.noanimations.scalable .main-stage,
.noanimations.scalable .main-stage::before,
.noanimations.scalable .main-stage .side1,
.noanimations.scalable .main-stage .side2,
.noanimations.scalable .main-stage .side1::before,
.noanimations.scalable .main-stage .side2::before,
.noanimations .coordinates::before, .noanimations .coordinates::after,
.noanimations .coordinates_::before, .noanimations .coordinates_::after,
.noanimations .main-elements::after{
transition:none!important;
}

.object3d.rotate{
animation:autorotate linear 20s forwards infinite;
}

@keyframes autorotate{
100%{
transform:perspective(var(--p, 1000px)) rotateX(var(--x, 0deg)) rotateY(var(--y, 0deg)) rotateZ(var(--path-max-rotate)) translate3d(var(--tx, 0px), var(--ty, 0px), var(--tz, -12px));
}
}

.reusable-rect{
/*defaults - position, size and angle*/
--x:0deg;
--y:0deg;
/*--z:0deg;*/
--width:300px;
--height:50px;
--length:600px;
--left:0px;
--top:0px;

/* colors, shades and shadows */
--default-color:white;
--shade-template:linear-gradient(0deg, var(--shade-color), var(--shade-color));
--shadow-color:#000;
--shadow-intensity:0.14;
--shadow-filter:blur(10px);
--shadow-size:1.05;
--shadow-distance:0px;

position:relative;
width:var(--width);
height:var(--length);
background:var(--back-color,var(--default-color));
display:inline-block;
transform-origin:50% 50%;
transform-style:preserve-3d;
}

/* some anti-aliasing */
.reusable-rect, .reusable-rect div{
box-shadow:0 0 0 1px rgba(0,0,0,0);
}

/* all sides */
.reusable-rect .sides{
position:absolute;
left:0;
top:0;
display:block;
transform-style:preserve-3d;
backface-visibility:hidden;
}

/* upper part */
.reusable-rect:before{
transform:translateZ(var(--height));
background:var(--front-color,var(--default-color));
}

/* sides x-axis - horz */
.reusable-rect .side1{
width:var(--height);
height:var(--length);
transform:rotateY(-90deg);
transform-origin:0% 0%;
background:var(--x-axis-left-color,var(--default-color));
}

.reusable-rect .side1::before{
background-color:var(--x-axis-right-color,var(--default-color));
background-image:var(--shade-template);
transform:translateZ(calc(var(--width) * -1));
}

/* sides y-axis - vert */
.reusable-rect .side2{
width:var(--width);
height:var(--height);
transform:rotateX(90deg);
transform-origin:0% 0%;
background:var(--y-axis-top-color,var(--default-color));
}

.reusable-rect .side2::before{
background-color:var(--y-axis-bottom-color,var(--default-color));
background-image:var(--shade-template);
transform:translateZ(calc(var(--length) * -1));
}

.reusable-rect:before, 
.reusable-rect .side1::before, 
.reusable-rect .side2::before{
content:"";
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
display:block;
/*backface-visibility:hidden;*/
}

/*.noborders{
--proxy-tz:calc(var(--tz) - 270px);
}*/

.noborders .chess-defaults{
--border-size:0px;
--outline-offset:0px;
--outline-size:0px;
}

.noborders .coordinates::before, .noborders .coordinates::after{
color:rgba(0,0,0,0);
}

.noscroll{
overflow:hidden;
}

/* Animate the border */
.scalable .main-stage,
.scalable .main-stage::before,
.scalable .main-stage .side1,
.scalable .main-stage .side2,
.scalable .main-stage .side1::before,
.scalable .main-stage .side2::before{
transition:all ease 0.7s;
transition-property:width, height, transform, background-color;
}

/* Stage */
.main-stage{
--width:var(--border-template);
--height:50px;
--length:var(--border-template);

--shade-color:rgba(0,0,0,0);
--back-color:#FFDBB7;
--front-color:#FFDBB7;
--x-axis-left-color:#BF9D7A;
--x-axis-right-color:#BF9D7A;
--x-axis-right-color-2:#905438;
--y-axis-top-color:#E8C19A;
--y-axis-bottom-color:#E8C19A;
}

.main-stage::after{
content:"";
position:absolute;
left:50%;
top:51%;
width:106%;
height:103%;
background:rgba(0,0,0,0.24);
filter:blur(10px);
transform:translate(-50%,-50%) translateZ(-1px);
border-radius:4%;
backface-visibility:hidden;
}

.main-stage .side1{
background-color:var(--front-color);
background-image:linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), linear-gradient(0deg, transparent 50%, var(--front-color) 50%);
background-size:1px 1px, 200px 200px;
}

/* Stage Elements */
.main-elements{
position:absolute;
left:50%;
top:50%;
width:var(--max-area);
height:var(--max-area);
transform:translate(-50%,-50%) translateZ(var(--height));
transform-style:preserve-3d;

--concat-color:#905438;
background-image:linear-gradient(45deg, var(--concat-color) calc(25% + 0.3px), transparent 25%, transparent 75%, var(--concat-color) 75%, var(--concat-color) 0),
linear-gradient(45deg, var(--concat-color) calc(25% + 0.3px), transparent 25%, transparent 75%, var(--concat-color) 75%, var(--concat-color) 0);
background-size:var(--block-set-size) var(--block-set-size);
background-position:0 0, var(--block-size) var(--block-size);

/*
amazing approach, but unsuitable
background-image:linear-gradient(rgba(255,219,183,0.6),rgba(255,219,183,0.6)), linear-gradient(to right, black 50%, white 50%), linear-gradient(to bottom, black 50%, white 50%);
background-blend-mode:normal, difference, normal;
background-size:var(--block-size) var(--block-size);
filter:contrast(1.8);
*/
}

.main-elements::before{
/*content:""*/
position:absolute;
left:0;top:0;
width:100%;height:100%;
display:block;
}

.main-elements::after{
content:"";
position:absolute;
left:50%;top:50%;
width:var(--outline-template);
height:var(--outline-template);
border:var(--outline-size) solid #905438;
border-radius:5px;
transform:translate(-50%,-50%);
transition:all ease 0.4s;
transition-property:width,height,border;
box-sizing:content-box;
box-shadow:0 0 0 2px rgba(0,0,0,0);
}

.stage-over{
position:absolute;
}

/* Coordinates */
.coordinates, .coordinates_{
position:absolute;
width:100%;
height:var(--border-size-init);
bottom:0;
}

.coordinates{
left:0;
transform:translateY(100%);
}

.coordinates_{
right:calc(var(--border-size-init) * -1);
transform:translateX(100%) rotate(-90deg);
transform-origin:0% 100%;
}

.coordinates::before, .coordinates::after,
.coordinates_::before, .coordinates_::after{
box-sizing:border-box;
content:" ABCDEFGH ";
position:absolute;left:0;display:block;
letter-spacing:82px;
text-indent:38px;
padding-top:20px;
font-family:"Segoe UI", Arial, sans-serif;
color:#905438;
font-size:30px;
text-align:justify;
width:100%;
height:var(--border-size);
transition:all ease 0.7s;
overflow:hidden;
}

.coordinates::after{
content:" HGFEDCBA ";
}

.coordinates_::before, .coordinates_::after{
content:" 12345678 ";
letter-spacing:84px;
}

.coordinates_::after{
content:" 87654321 ";
}

.coordinates::before, .coordinates_::before{
top:0;
}

.coordinates::after, .coordinates_::after{
bottom:80px;
transform:rotate(180deg) translateY(var(--max-area));
}

/* Chess Defaults */
.chess-defaults{
--block-size:100px;
--block-set-size:calc(var(--block-size) * 2);
--block-size-ag:100;
--outline-size:6px;
--outline-offset:8px;
--border-size:80px;
--border-size-init:80px;
--max-area:calc(var(--block-size) * 8);
--outline-template:calc(100% + var(--outline-offset) * 2);
--border-template:calc(var(--max-area) + var(--border-size) * 2);

--oct-path:polygon(50% 0%, 0 100%, 100% 100%);
--nan-path:polygon(50% 0%, 0 96%, 86% 100%);
/*polygon(50% -25%, 0 100%, 100% 100%)*/
}

/* Pieces */
.board{
position:absolute;left:0;top:0;width:100%;height:100%;display:block;transform-style:preserve-3d;
}

.piece{
position:absolute;
left:calc(var(--block-size) * min(var(--h), 7));
bottom:calc(var(--block-size) * min(var(--v), 7));
width:var(--block-size);
height:var(--block-size);
transform:rotate(0deg);
transform-style:preserve-3d;
transition:background-color ease 0.5s;
--A-color:#DBA162;
--B-color:#B38554;
}

.highlighted .piece{
background-color:rgba(0,100,220,0.6);
}

.piece > .reusable-rect{
position:absolute;left:50%;top:50%;
--back-color:#DBA162;
--front-color:#DBA162;
--x-axis-left-color:#BF9D7A;
--x-axis-right-color:#b38554;
--y-axis-top-color:#FEC485;
--y-axis-bottom-color:#FEC485;
}

.piece.BLACK > .reusable-rect{
--back-color:#3C3C3C;
--front-color:#3C3C3C;
--x-axis-left-color:#000000;
--x-axis-right-color:#191B18;
--y-axis-top-color:#191B18;
--y-axis-bottom-color:#000000;
}

.piece.BLACK{
--A-color:#191B18;
--B-color:#3C3C3C;
}

.BLACK.HORSE{
transform:rotate(180deg);
}

.KING{
--piece-basesize:60px;
--piece-upsize:50px;
--piece-thickness:24px;
--piece-height:120px;
--piece-head:30px;
}

.QUEEN{
--piece-basesize:60px;
--piece-upsize:50px;
--.........完整代码请登录后点击上方下载按钮下载查看