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