纯css绘制三维3d魔方旋转效果-html代码-BFW代码库

纯css绘制三维3d魔方旋转效果

代码语言：html

所属分类：三维

代码描述：纯css绘制三维3d魔方旋转效果，点击按钮进行旋转切换，无js

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
.rubic{
  margin:100px;
  width:150px;
  height:156px;
  perspective:600px;
}
.container{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr; 
  grid-template-rows: 50px 50px 50px;
  grid-column-gap:3px;
  grid-row-gap:3px;
  justify-content: center;
  /*align-items:center;*/
}
.cube{
  width:150px;
  height:156px;
  position:relative;
  margin:100px;
  transform-style: preserve-3d;
  transition:0.7s;
}
.cube-face{
  width:inherit;
  height:inherit;
  position:absolute;
  background:black;
  backface-visibility:hidden;
}
.cube-face-front .cell{
  background-color: blue;
  color: white;
  
}
.cube-face-back .cell{
  background-color: yellow;
  color: white;
  
}
.cube-face-left .cell{
  background-color: green;
  color: white;
  
}
.cube-face-right .cell{
  background-color: red;
  color: white;
  
}
.cube-face-top .cell{
  background-color: orange;
  color: white;
  
}
.cube-face-bottom .cell{
  background-color: grey;
  color: white;
  
}

.cube-face-front{
  transform: translate3d(0,0,75px);
}
.cube-face-back{
  transform: rotateY(180deg) translate3d(0,0,75px);
}
.cube-face-left{
  transform: rotateY(-90deg) translate3d(0,0,75px);
}
.cube-face-right {
  transform: rotateY(90deg) translate3d(0,0,75px);
}
.cube-face-top {
  transform: rotateX(90deg) translate3d(0,0,75px);
}
.cube-face-bottom {
  transform: rotateX(-90deg) translate3d(0,0,75px);
}
#radio-back:checked ~ .rubic .cube {
  transform: rotateY(180deg);
} 
#radio-left:checked ~ .rubic .cube {
  transform: rotateY(-90deg);
} 
#radio-right:checked ~ .rubic .cube {
  transform: rotateY(90deg);
}
#radio-top:checked ~ .rubic .cube {
  transform: rotateX(90deg);
}  
#radio-bottom:checked ~ .rubic .cube {
  transform: rotateX(-90deg);
}
</style>

</head>
<body translate="no">
<input type="radio" checked id="radio-front" name="select-face" />
<input type="radio" id="radio-back" name="select-face" />
<input type="radio" id="radio-left" name="select-face" />
<input type="radio" id="radio-right" name="select-face" />
<input type="radio" id="radio-top" name="select-face" />
<input type="radio" id="radio-bottom" name="select-face" />
<div class="rubic">
<div class="cube">
<div class="cube-face cube-face-front">
<div class="container">
<div class="cell cell-1"></div>
<div class="cell cell-2"></div>
<div class="cell cell-3"></div>
<div class="cell cell-4"></div>
<div class="cell cell-5"></div>
<div class="cell cell-6"></div>
<div class="cell cell-7"></div>
<div class="cell cell-8"></div>
<div class=&q.........完整代码请登录后点击上方下载按钮下载查看