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