css 3d魔方

下载代码

html

css

分享到微信朋友圈

html

css

:root {
  --background-color: #262626;
  --blue: #b5d1ec;
  --red: #f98690; 
  --yellow: #f9f7b5;
  --orange: #f9d4bc;
  --white: #f8f8f8;
  --green: #b0e4d2;
  --in-between-color: #767c87;
}

body {
  background-color: #262626;
}

.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) 66px,
    var(--in-between-color) 68px,
    var(--yellow) 68px,
    var(--yellow) 132px,
    var(--in-between-color) 132px
  );
}

.right {
  transform: translateX(100px) rotateY(90deg);
  background: repeating-linear-gradient(
    to right,
    var(--in-between-color) 0,
    var(--in-between-color) 2px,
    var(--red) 2px,
    var(--red) 66px,
    var(--in-between-color) 66px,
    var(--in-between-color) 68px,
    var(--red) 68px,
    var(--red) 132px,
    var(--in-between-color) 132px
  );
}

.top {
  transform: translateY(-100px) rotateX(90deg);
  background: repeating-linear-gradient(
    to right,
    var(--in-between-color) 0,
    var(--in-between-color) 2px,
    var(--green) 2px,
    var(--green) 66px,
    var(--in-between-color) 66px,
    var(--in-between-color) 68px,
    var(--green) 68px,
    var(--green) 132px,
    var(--in-between-color) 132px
  );
}

.bottom {
  transform: translateY(100px) rotateX(90deg);
  background: repeating-linear-gradient(
    to right,
    var(--in-between-color) 0,
    var(--in-between-color) 2px,
    var(--white) 2px,
    var(--white) 66px,
    var(--in-between-color) 66px,
    var(--in-between-color) 68px,
    var(--white) 68px,
    var(--white) 132px,
    var(--in-between-color) 132px
  );
}

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

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg