纯css布局实现一个魔方效果-html代码-BFW代码库

纯css布局实现一个魔方效果

代码语言：html

代码描述：纯css布局实现一个魔方效果

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


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

<style>
:root {
  --background-color: #E1CAF9;
  --blue: #B5D1EC;
  --red: #F98690;
  --yellow: #F9F7B5;
  --orange: #F9D4BC;
  --white: #F8F8F8;
  --green: #B0E4D2;
  --in-between-color: #767C87;
}

body{
  background: var(--background-color);
}

.box-canvas{
  position: relative;
  margin: auto;
  display: block;
  margin-top: 8%;
  margin-bottom: 8%;
  width: 600px;
  height:600px;
  background: var(--background-color);
  perspective: 800px;
}

@keyframes rotateCube {
  0% {
    transform: rotateX(0) rotateY(0);
  }

  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

.cube {
  position:relative;
  margin: auto;
  margin-top: 200px;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
  animation: rotateCube 10s infinite;
}

.side {
  position: absolute;
  width: 200px;
  height: 200px;
}

.side::before {
  content: '';
  position: absolute;
  width: 200px;
  height: 200px;
  transform: rotate(90deg);
  background: repeating-linear-gradient(to right, var(--in-between-color)  0, var(--in-between-color)  2px, transparent 2px, transparent 66px, var(--in-between-color) 66px, var(--in-between-color) 68px, transparent 68px, transparent 132px, var(--in-between-color) 132px);
}

.back {
  transform: translateZ(-100px);
  background: repeating-linear-gradient(to right, var(--in-between-color) 0, var(--in-between-color) 2px, var(--blue) 2px, var(--blue)  66px, var(--in-between-color) 66px, var(--in-between-color) 68px, var(--blue) 68px, var(--blue) 132px, var(--in-between-color) 132px);
}


.left {
  transform: translateX(-100px) rotateY(90deg);
   background: repeating-linear-gradient(to right, var(--in-between-color)  0, var(--in-between-color)  2px, var(--yellow) 2px, var(--yellow)  66px, var(--in-between-color) 66p.........完整代码请登录后点击上方下载按钮下载查看